/* The token layer. Ported from design-reference/modernist.css and docs/design/TOKENS.md.
   Nothing outside this file may contain a colour literal, a font name, or a raw spacing value.

   Both themes live in one declaration each, via light-dark(). The theme is chosen by `color-scheme`:

     no attribute / [data-theme="auto"]  ->  color-scheme: light dark  ->  follows the OS
     [data-theme="light"]                ->  color-scheme: light
     [data-theme="dark"]                 ->  color-scheme: dark

   That means Auto needs no JavaScript and no duplicated dark block, and there is no theme flash:
   the server writes data-theme from the cookie before the page is sent.

   The ramps are INVERTED in dark — 100 swaps with 900, 200 with 800, and so on, 500 unchanged.
   That inversion is what lets a tinted chip (fill 100, text 800) stay legible in both themes with no
   per-component override. Do not "fix" a dark ramp value to look lighter; it would break every
   component that relies on the pairing. */

:root {
  color-scheme: light dark;

  /* — roles — */
  --color-bg: light-dark(#f2efe3, #16100b);        /* coconut flesh / shell interior */
  --color-surface: light-dark(#e6e1d0, #221913);
  --color-text: light-dark(#241a12, #f2efe3);      /* shell dark / flesh */
  --color-accent: light-dark(#5e8b2b, #93c24d);    /* husk green */
  --color-accent-2: light-dark(#a3743f, #a3743f);  /* shell brown — same in both themes */
  /* light-dark() takes COLOURS, not percentages — light-dark(38%, 30%) parses but is invalid at
     computed-value time, which silently drops every declaration that uses it. The whole colour goes
     inside each branch instead. Do not refactor this back into one color-mix with a light-dark alpha. */
  --color-divider: light-dark(
    color-mix(in srgb, #241a12 38%, transparent),
    color-mix(in srgb, #f2efe3 30%, transparent));

  /* — neutral ramp (dried fibre) — */
  --color-neutral-100: light-dark(#fbf4ed, #302b24);
  --color-neutral-200: light-dark(#eee7de, #484139);
  --color-neutral-300: light-dark(#dbd3c9, #655c53);
  --color-neutral-400: light-dark(#bfb6ab, #82786e);
  --color-neutral-500: light-dark(#a0968b, #a0968b);
  --color-neutral-600: light-dark(#82786e, #bfb6ab);
  --color-neutral-700: light-dark(#655c53, #dbd3c9);
  --color-neutral-800: light-dark(#484139, #eee7de);
  --color-neutral-900: light-dark(#302b24, #fbf4ed);

  /* — accent ramp (young husk) — */
  --color-accent-100: light-dark(#eefae5, #21310f);
  --color-accent-200: light-dark(#dbf0ca, #324b16);
  --color-accent-300: light-dark(#c1e0a6, #476a20);
  --color-accent-400: light-dark(#9dc778, #5e8a2e);
  --color-accent-500: light-dark(#7aa94a, #7aa94a);
  --color-accent-600: light-dark(#5e8a2e, #9dc778);
  --color-accent-700: light-dark(#476a20, #c1e0a6);
  --color-accent-800: light-dark(#324b16, #dbf0ca);
  --color-accent-900: light-dark(#21310f, #eefae5);

  /* — accent-2 ramp (shell) — */
  --color-accent-2-100: light-dark(#fff3e7, #392713);
  --color-accent-2-200: light-dark(#fae4ce, #573c1e);
  --color-accent-2-300: light-dark(#efceac, #79552d);
  --color-accent-2-400: light-dark(#d9af81, #9c703f);
  --color-accent-2-500: light-dark(#bd8e5a, #bd8e5a);
  --color-accent-2-600: light-dark(#9c703f, #d9af81);
  --color-accent-2-700: light-dark(#79552d, #efceac);
  --color-accent-2-800: light-dark(#573c1e, #fae4ce);
  --color-accent-2-900: light-dark(#392713, #fff3e7);

  /* Paragraph text in the accent. The accent-to-ground pair is tuned to ~3:1 — enough for icons,
     large text and chrome, NOT for body copy. Use this instead of --color-accent for paragraphs. */
  --color-accent-text: var(--color-accent-700);

  /* — type — */
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  /* The interface metadata register: counts, timestamps, ids, paths, status lines, section labels.
     This is how the workspace distinguishes data from chrome. It is not decoration. */
  --font-mono: ui-monospace, Menlo, monospace;

  --text-h1: 42px;
  --text-h2: 32px;
  --text-h3: 25px;
  --text-h4: 20px;
  --text-h5: 16px;
  --text-h6: 13px;
  --text-body: 15px;
  --text-ui: 14px;
  --text-sm: 13px;
  --text-xs: 11px;
  --text-mono: 11px;

  /* The metadata register runs 10-12px; 12px is its upper end, used for dates, sublines and bylines. */
  --text-meta: 12px;

  --leading-heading: 1.12;
  --leading-body: 1.55;
  --tracking-heading: -0.015em;
  --tracking-label: 0.08em;
  --tracking-wide: 0.16em;
  --tracking-crumb: 0.12em;
  --tracking-kicker: 0.18em;

  /* — spacing — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* — radius — zero at every level, everywhere, deliberately. Never round a corner. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* — rules — 2px between major sections, 1px between rows. Never softened to a hairline,
     never replaced with whitespace. */
  --rule-section: 2px;
  --rule-row: 1px;

  /* — elevation — only sheets and drawers are elevated. Nothing else floats.
     Light: soft ink-tinted shadow. Dark: a hairline edge plus ambient darkness, because a soft
     shadow is invisible against a dark ground. */
  --shadow-sm:
    light-dark(0 1px 2px color-mix(in srgb, #241a12 16%, transparent),
               0 1px 2px color-mix(in srgb, #000000 55%, transparent));
  --shadow-md:
    light-dark(0 3px 10px color-mix(in srgb, #241a12 18%, transparent),
               0 3px 10px color-mix(in srgb, #000000 60%, transparent));
  --shadow-lg:
    light-dark(0 12px 32px color-mix(in srgb, #241a12 24%, transparent),
               0 12px 32px color-mix(in srgb, #000000 70%, transparent));
  /* Same rule as --color-divider: the light-dark() branches must each be a whole colour. */
  --edge-hairline: 0 0 0 1px light-dark(transparent, color-mix(in srgb, #f2efe3 14%, transparent));

  /* — states — */
  --tint-hover: color-mix(in srgb, var(--color-text) 7%, transparent);
  --tint-pressed: color-mix(in srgb, var(--color-text) 14%, transparent);
  --tint-row-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
  --opacity-disabled: 0.45;

  /* Focus is always this. Never the browser default, never removed without a replacement. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --muted-strong: color-mix(in srgb, var(--color-text) 70%, transparent);
  --muted: color-mix(in srgb, var(--color-text) 55%, transparent);
  --muted-weak: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* Deliberately NOT scoped to :root. light-dark() resolves against the inherited color-scheme, so an
   unscoped selector lets any subtree be pinned to a theme by putting data-theme on it — which the
   editor (3e) needs: its reader preview is always light, because it is the reader's view and not the
   console. Scoping these to :root would silently make that impossible. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="auto"] { color-scheme: light dark; }