/* Wekly brand tokens. GENERATED by packages/brand/build.mjs from tokens.source.mjs; do not edit by hand.
 * Load fonts with:
 * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
 * Light and dark follow the system; set data-theme="light" | "dark" on <html> to force one. */

:root {
  --bg: #F5F8F6;
  --surface: #FFFFFF;
  --surface-2: #ECF1EE;
  --surface-3: #D9E2DD;
  --line: #D9E2DD;
  --line-strong: #B3C0B9;
  --line-control: #7F8F88;
  --fg: #0E1D18;
  --fg-2: #34423C;
  --fg-3: #566660;
  --brand: #0F4D3A;
  --brand-hover: #0B3B2C;
  --on-brand: #FFFFFF;
  --brand-text: #0F4D3A;
  --brand-soft: #DFEFE7;
  --ok: #1E7B52;
  --ok-soft: #DDF0E5;
  --ok-text: #14573A;
  --diag: #F2B01E;
  --on-diag: #1F1600;
  --diag-soft: #FDF0CC;
  --diag-text: #6E4A00;
  --err: #B42318;
  --err-soft: #FBE5E2;
  --err-text: #8F1B12;
  --ring: #0F4D3A;
  --hero-bg: #0F4D3A;
  --hero-fg: #F5F8F6;
  --hero-muted: #BFD9CD;
  --hero-cell: #1E6550;
  --subj-rose: #F3E7E9;
  --subj-rose-text: #682730;
  --subj-sky: #C7DCE6;
  --subj-sky-text: #24566B;
  --subj-iris: #E5DDEE;
  --subj-iris-text: #452B64;
  --subj-leaf: #BADEBF;
  --subj-leaf-text: #205B28;
  --subj-apricot: #F7E3D6;
  --subj-apricot-text: #6F3D20;
  --subj-teal: #CEE9E5;
  --subj-teal-text: #206057;
  --subj-orchid: #EFE1EE;
  --subj-orchid-text: #642B5F;
  --subj-berry: #E3BFD0;
  --subj-berry-text: #6A2545;
  --subj-olive: #E8F0D6;
  --subj-olive-text: #516B24;
  --subj-slate: #D9DCE3;
  --subj-slate-text: #384157;
  --shadow-sm: 0 1px 2px rgba(14,29,24,0.06);
  --shadow-md: 0 1px 2px rgba(14,29,24,0.06), 0 6px 16px -4px rgba(14,29,24,0.10);
  --shadow-lg: 0 2px 4px rgba(14,29,24,0.06), 0 24px 48px -16px rgba(14,29,24,0.22);

  --font-display: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-display: 800 clamp(40px, 6vw, 64px)/1 var(--font-display);
  --tracking-display: -0.035em;
  --text-h1: 700 40px/44px var(--font-display);
  --tracking-h1: -0.03em;
  --text-h2: 700 28px/34px var(--font-display);
  --tracking-h2: -0.02em;
  --text-h3: 600 20px/26px var(--font-display);
  --tracking-h3: -0.01em;
  --text-body-lg: 400 18px/28px var(--font-body);
  --tracking-body-lg: 0;
  --text-body: 400 16px/24px var(--font-body);
  --tracking-body: 0;
  --text-ui: 500 14px/20px var(--font-body);
  --tracking-ui: 0;
  --text-caption: 500 12px/16px var(--font-body);
  --tracking-caption: 0.01em;
  --text-label: 600 11px/16px var(--font-mono);
  --tracking-label: 0.08em;
  --text-num: 500 14px/20px var(--font-mono);
  --tracking-num: 0;

  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-snap: cubic-bezier(0.3, 1.4, 0.5, 1);

  --ring-width: 2px;
  --ring-offset: 2px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1410;
    --surface: #111D18;
    --surface-2: #18261F;
    --surface-3: #24352D;
    --line: #24352D;
    --line-strong: #425A4F;
    --line-control: #5F786D;
    --fg: #E9F3EE;
    --fg-2: #C2D3CB;
    --fg-3: #93AA9F;
    --brand: #4CC592;
    --brand-hover: #6BD3A6;
    --on-brand: #04150D;
    --brand-text: #5FD3A1;
    --brand-soft: #12301F;
    --ok: #4CC592;
    --ok-soft: #12301F;
    --ok-text: #7BDDB2;
    --diag: #F2B01E;
    --on-diag: #1F1600;
    --diag-soft: #2D2308;
    --diag-text: #F6CB62;
    --err: #F0857A;
    --err-soft: #3A1512;
    --err-text: #F7A59C;
    --ring: #4CC592;
    --hero-bg: #12301F;
    --hero-fg: #E9F3EE;
    --hero-muted: #9CC4B2;
    --hero-cell: #1B4330;
    --subj-rose: #442226;
    --subj-rose-text: #EED3D6;
    --subj-sky: #315B6D;
    --subj-sky-text: #D1E7F0;
    --subj-iris: #3C2852;
    --subj-iris-text: #E0D4ED;
    --subj-leaf: #397942;
    --subj-leaf-text: #FFFFFF;
    --subj-apricot: #40291C;
    --subj-apricot-text: #F1DCD0;
    --subj-teal: #2E665F;
    --subj-teal-text: #D5F1ED;
    --subj-orchid: #4A2647;
    --subj-orchid-text: #EDD4EB;
    --subj-berry: #763252;
    --subj-berry-text: #EFD2DF;
    --subj-olive: #495A2A;
    --subj-olive-text: #E4F0D1;
    --subj-slate: #4F586D;
    --subj-slate-text: #E0E3EB;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 8px 20px -6px rgba(0,0,0,0.5);
    --shadow-lg: 0 2px 4px rgba(0,0,0,0.5), 0 24px 48px -16px rgba(0,0,0,0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0A1410;
  --surface: #111D18;
  --surface-2: #18261F;
  --surface-3: #24352D;
  --line: #24352D;
  --line-strong: #425A4F;
  --line-control: #5F786D;
  --fg: #E9F3EE;
  --fg-2: #C2D3CB;
  --fg-3: #93AA9F;
  --brand: #4CC592;
  --brand-hover: #6BD3A6;
  --on-brand: #04150D;
  --brand-text: #5FD3A1;
  --brand-soft: #12301F;
  --ok: #4CC592;
  --ok-soft: #12301F;
  --ok-text: #7BDDB2;
  --diag: #F2B01E;
  --on-diag: #1F1600;
  --diag-soft: #2D2308;
  --diag-text: #F6CB62;
  --err: #F0857A;
  --err-soft: #3A1512;
  --err-text: #F7A59C;
  --ring: #4CC592;
  --hero-bg: #12301F;
  --hero-fg: #E9F3EE;
  --hero-muted: #9CC4B2;
  --hero-cell: #1B4330;
  --subj-rose: #442226;
  --subj-rose-text: #EED3D6;
  --subj-sky: #315B6D;
  --subj-sky-text: #D1E7F0;
  --subj-iris: #3C2852;
  --subj-iris-text: #E0D4ED;
  --subj-leaf: #397942;
  --subj-leaf-text: #FFFFFF;
  --subj-apricot: #40291C;
  --subj-apricot-text: #F1DCD0;
  --subj-teal: #2E665F;
  --subj-teal-text: #D5F1ED;
  --subj-orchid: #4A2647;
  --subj-orchid-text: #EDD4EB;
  --subj-berry: #763252;
  --subj-berry-text: #EFD2DF;
  --subj-olive: #495A2A;
  --subj-olive-text: #E4F0D1;
  --subj-slate: #4F586D;
  --subj-slate-text: #E0E3EB;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 8px 20px -6px rgba(0,0,0,0.5);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.5), 0 24px 48px -16px rgba(0,0,0,0.7);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}