/**
 * Briefer Design System: Foundations
 *
 * The single source of truth for every design value in the product, and a
 * carbon copy of the Briefer Design System Figma file ("◆ Foundations": the
 * Color, Spacing, Radius and Motion variable collections, the text styles and
 * the effect styles). Figma is upstream: change a value there first, then
 * mirror it here. Token names are the Figma names, with "/" written as "-".
 *
 * Nothing else holds a raw colour, type size, spacing step, radius or shadow:
 * the atoms built on these tokens are in atoms.css, and the molecules built
 * on those atoms in molecules.css.
 * Tailwind does not either: static/tailwind-config.js maps its theme onto
 * these properties and carries no values of its own, so `bg-card`,
 * `rounded-lg`, `shadow-md`, `p-sm` and `text-h2` all resolve here.
 *
 * :root is Figma's Light mode and .dark its Dark mode. A token Figma gives one
 * value for both modes is declared once, in :root. Either class also works on
 * a section, to force a mode inside a page that is in the other one.
 */

:root,
.light {
  /* ── Colour (Figma collection "Color", Light mode) ── */
  --background: #f2f0ee;
  --card: #eceae8;
  --secondary: #e4e2e0;
  --bg-3: #d8d6d4;
  --bg-4: #cccac8;

  --foreground: #0f0e0d;
  --fg-2: #4a4846;
  --muted-foreground: #787674;
  --fg-4: #a8a6a4;
  --placeholder: #cccac8;

  /* Light mode has a single border primitive, so border-subtle and border
     share it. Only Dark separates them. */
  --border-subtle: rgb(0 0 0 / 0.09);
  --border: rgb(0 0 0 / 0.09);
  --border-strong: rgb(0 0 0 / 0.16);
  --ring: rgb(9 137 38 / 0.55);              /* #098926 at 55% */

  --primary: #098926;
  --primary-foreground: #f2f2f4;
  --accent: #098926;
  --accent-hover: #24a137;
  --accent-active: #006c15;
  --accent-subtle: rgb(9 137 38 / 0.13);     /* #098926 at 13% */
  --accent-border: rgb(9 137 38 / 0.40);     /* #098926 at 40% */

  /* The base tones are tuned for dark surfaces and lose contrast as text on
     the light background. Use the -foreground variants for text and icons:
     they darken here and match the base tone again in Dark. */
  --success: #008140;
  --success-subtle: rgb(0 129 64 / 0.12);    /* #008140 at 12% */
  --success-foreground: #005b25;
  --warning: #d97706;
  --warning-subtle: rgb(217 119 6 / 0.12);   /* #d97706 at 12% */
  --warning-foreground: #a85d04;
  --danger: #e05252;
  --danger-subtle: rgb(224 82 82 / 0.12);    /* #e05252 at 12% */
  --danger-foreground: #c93c3c;
  --pending: #1b4a6b;
  --pending-subtle: #dce7ef;
  --pending-foreground: #1e4763;

  /* Not in Figma: the one colour the product needs that Foundations does not
     define yet, the dimmer behind dialogs, drawers and lightboxes. Always used
     with an opacity (`bg-scrim/50`). Add it to Figma, then drop this note. */
  --scrim: #000000;

  /* ── Typography (Figma text styles) ──
     One row per style: size, weight, line-height, letter-spacing. Söhne's cuts
     map to weights as Buch 400, Kräftig 500, Halbfett 600, Dreiviertelfett 700
     and Fett 800. `display` is italic (Fett Kursiv) and `overline` is
     uppercase. A style is applied whole, through its `text-<style>` class. */
  --font-sans: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-display-size: 64px;   --type-display-weight: 800;   --type-display-line: 1.05;   --type-display-tracking: -0.03em;
  --type-h1-size: 44px;        --type-h1-weight: 800;        --type-h1-line: 1.1;         --type-h1-tracking: -0.025em;
  --type-h2-size: 30px;        --type-h2-weight: 700;        --type-h2-line: 1.2;         --type-h2-tracking: -0.02em;
  --type-h3-size: 22px;        --type-h3-weight: 600;        --type-h3-line: 1.25;        --type-h3-tracking: -0.015em;
  --type-h4-size: 17px;        --type-h4-weight: 500;        --type-h4-line: 1.3;         --type-h4-tracking: 0em;
  --type-body-lg-size: 16px;   --type-body-lg-weight: 400;   --type-body-lg-line: 1.65;   --type-body-lg-tracking: 0em;
  --type-body-size: 14px;      --type-body-weight: 400;      --type-body-line: 1.55;      --type-body-tracking: 0em;
  --type-label-size: 14px;     --type-label-weight: 500;     --type-label-line: 1.2;      --type-label-tracking: 0em;
  --type-caption-size: 12px;   --type-caption-weight: 400;   --type-caption-line: 1.4;    --type-caption-tracking: 0em;
  --type-small-size: 11px;     --type-small-weight: 400;     --type-small-line: 1.4;      --type-small-tracking: 0em;
  --type-overline-size: 11px;  --type-overline-weight: 600;  --type-overline-line: 1.2;   --type-overline-tracking: 0.12em;
  --type-mono-size: 13px;      --type-mono-weight: 400;      --type-mono-line: 1.4;       --type-mono-tracking: 0em;
  --type-mono-sm-size: 9px;    --type-mono-sm-weight: 400;   --type-mono-sm-line: 1.6;    --type-mono-sm-tracking: 0.06em;

  /* Each style again as a `font` shorthand, for plain CSS (atoms.css): pair it
     with the style's -tracking token. Built from the rows above, never edited. */
  --type-display: italic var(--type-display-weight) var(--type-display-size)/var(--type-display-line) var(--font-sans);
  --type-h1: var(--type-h1-weight) var(--type-h1-size)/var(--type-h1-line) var(--font-sans);
  --type-h2: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-line) var(--font-sans);
  --type-h3: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-line) var(--font-sans);
  --type-h4: var(--type-h4-weight) var(--type-h4-size)/var(--type-h4-line) var(--font-sans);
  --type-body-lg: var(--type-body-lg-weight) var(--type-body-lg-size)/var(--type-body-lg-line) var(--font-sans);
  --type-body: var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-sans);
  --type-label: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans);
  --type-caption: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-line) var(--font-sans);
  --type-small: var(--type-small-weight) var(--type-small-size)/var(--type-small-line) var(--font-sans);
  --type-overline: var(--type-overline-weight) var(--type-overline-size)/var(--type-overline-line) var(--font-sans);
  --type-mono: var(--type-mono-weight) var(--type-mono-size)/var(--type-mono-line) var(--font-mono);
  --type-mono-sm: var(--type-mono-sm-weight) var(--type-mono-sm-size)/var(--type-mono-sm-line) var(--font-mono);

  /* ── Spacing (Figma collection "Spacing") ── */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ── Radius (Figma collection "Radius") ── */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadow (Figma effect styles) ──
     Figma's effect styles carry a single set of values, drawn for Dark, and
     those are the ones in .dark below. Light has no definition in Figma yet:
     it keeps these softer values until it does. */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px rgb(0 0 0 / 0.1), 0 10px 10px rgb(0 0 0 / 0.04);
  --shadow-2xl: 0 25px 50px rgb(0 0 0 / 0.25);

  /* ── Motion (Figma collection "Motion") ── */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  /* Easing curves have no Figma variable type, so they are defined here only. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Dark mode (Figma collection "Color", Dark mode)                     */
/* ══════════════════════════════════════════════════════════════════ */

[data-theme="dark"],
.dark {
  --background: #09090b;
  --card: #111113;
  --secondary: #18181c;
  --bg-3: #222228;
  --bg-4: #2c2c34;

  --foreground: #f2f2f4;
  --fg-2: #a0a0aa;
  --muted-foreground: #a0a0aa;
  --fg-4: #3e3e48;
  --placeholder: #2a2a32;

  --border-subtle: #1a1a1e;
  --border: #2a2a32;
  --border-strong: #3a3a44;
  --ring: rgb(9 137 38 / 0.65);              /* #098926 at 65% */

  /* The base tones already carry on dark surfaces, so -foreground resolves
     back to them. */
  --success-subtle: #001905;
  --success-foreground: #008140;
  --warning-foreground: #d97706;
  --danger-foreground: #e05252;
  --pending: #6fa8ce;
  --pending-subtle: #16293a;
  --pending-foreground: #6fa8ce;

  /* Figma effect styles shadow/sm … shadow/2xl. */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.25);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45), 0 2px 4px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 8px 40px rgb(0 0 0 / 0.6), 0 4px 8px rgb(0 0 0 / 0.4);
  --shadow-xl: 0 20px 25px rgb(0 0 0 / 0.5), 0 10px 10px rgb(0 0 0 / 0.4);
  --shadow-2xl: 0 25px 50px rgb(0 0 0 / 0.6);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Tokens written in terms of other tokens                              */
/* ══════════════════════════════════════════════════════════════════ */

/* Declared on every mode scope rather than on :root alone: a custom property
   resolves its var() where it is declared, so a :root-only alias would keep
   the page's mode inside a section that forces the other one. */
:root,
.light,
.dark,
[data-theme="dark"] {
  /* Aliases (not in Figma): names the components already use for a
     Foundations colour. They hold no value of their own. */
  --muted: var(--secondary);
  --input: var(--border);

  /* Figma effect style shadow/focus: a 2px gap in the surface colour, then a
     2px ring in primary. Written against the tokens so the gap follows the
     mode. */
  --shadow-focus: 0 0 0 2px var(--card), 0 0 0 4px var(--primary);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Fonts                                                               */
/* ══════════════════════════════════════════════════════════════════ */

/* Söhne — 8 weights × upright + italic, self-hosted from web/static/fonts.
   These must stay declared here: --font-sans silently falls back to system-ui
   without them, and
   the metric difference re-wraps the landing page's type at mobile widths.
   The weights base.gohtml preloads use font-display: block so the first paint
   is not a system-font flash that reflows once Söhne lands. */
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/extraleicht.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/extraleicht-kursiv.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/leicht.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: block; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/leicht-kursiv.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/buch.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/buch-kursiv.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/kraftig.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/kraftig-kursiv.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/halbfett.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/halbfett-kursiv.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: block; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/dreiviertelfett.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/dreiviertelfett-kursiv.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/fett.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/fett-kursiv.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: block; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/extrafett.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Soehne'; src: url('/static/fonts/soehne/extrafett-kursiv.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

/* ══════════════════════════════════════════════════════════════════ */
/* Base styles                                                         */
/* ══════════════════════════════════════════════════════════════════ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-padding-top: 5rem;
  color-scheme: light;
  transition: background-color var(--duration-slow) ease, color var(--duration-slow) ease;
}

html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
}

/* The document's own type (Figma's `body` style, the default copy style) is
   set from tailwind-config.js rather than here: Tailwind injects its preflight
   after this sheet, and its `body { line-height: inherit }` would win over a
   rule at the same specificity. Every text element still carries its own
   `text-<style>` class; the default only catches what has none. */
body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  transition: background-color var(--duration-slow) ease, color var(--duration-slow) ease;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--muted);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}