/*
 * MapleDrop design tokens. Loaded first; declares the cascade-layer order for
 * the whole stylesheet set (per-component + page files all live in the
 * components layer; see the ladder below).
 *
 * Color architecture (Fizzy/Basecamp model): colors are stored as bare OKLCH
 * component triplets in --lch-* tokens, then wrapped as oklch(var(--lch-*)) in
 * the named --color-* aliases. Storing the triplet (not the full color) lets any
 * consumer add an alpha — oklch(var(--lch-black) / 5%) — for shadows and overlays
 * without a parallel token.
 *
 * Ramps are named by PROMINENCE, not by literal lightness: --lch-ink-darkest is
 * the MOST prominent ink (near-black in light, near-white in dark), --lch-ink-
 * lightest the least (a hairline surface). Dark mode is then a single lightness
 * INVERSION of the ramp — a component that says `color: var(--color-ink-darkest)`
 * is correct in both themes, so there is no parallel --dark-* namespace to keep
 * in sync. Brand-fixed tokens that must NOT invert (the red fill, white-on-red,
 * the dark pine hero) are overridden explicitly in the dark block.
 *
 * Type is Fizzy's semantic scale (--text-*); spacing is two-axis: ch horizontal
 * (--inline-space) + rem vertical (--block-space). Sizing/radii use raw rem at a
 * standard 16px root.
 */

/* Cascade order (later wins). Everything visual lives in `components` (both the
   primitives and the page/feature files), Fizzy-style: components re-skin each
   other by setting custom properties (--btn-*, --pill-*), never by re-declaring
   a property, so a variant always wins without depending on load order. The
   `modules` layer is declared but empty: it is a reserved escalation slot for
   the rare rule that must beat a component deterministically. The :root design
   tokens below stay unlayered (Fizzy-style), so the variables always resolve. */
@layer reset, base, components, modules, utilities;

:root {
  /* Two-axis spacing (Fizzy model): ch horizontal (tracks the text), rem
     vertical. */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);

  /* Type scale: Fizzy's semantic tokens at a 16px root, bumped up on small
     screens (below) so text stays readable on phones. */
  --text-xx-small: 0.55rem;
  --text-x-small:  0.75rem;
  --text-small:    0.85rem;
  --text-normal:   1rem;
  --text-medium:   1.1rem;
  --text-large:    1.5rem;
  --text-x-large:  1.8rem;
  --text-xx-large: 2.5rem;

  @media (max-width: 639px) {
    --text-xx-small: 0.65rem;
    --text-x-small:  0.85rem;
    --text-small:    0.95rem;
    --text-normal:   1.1rem;
    --text-medium:   1.2rem;
  }

  --leading-tight: 1.15; --leading-snug: 1.3; --leading-base: 1.5; --leading-relaxed: 1.65;

  /* fonts */
  --font-sans:  "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* ── OKLCH ramps (bare triplets, prominence-named). Light mode values; the
     dark block below inverts the lightness. ───────────────────────────────── */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;

  /* Warm maple-tinted neutral "ink" ramp. darkest = most prominent ink. */
  --lch-ink-darkest:  14% 0.008 25;   /* primary text / ink */
  --lch-ink-darker:   21% 0.014 25;   /* strong text */
  --lch-ink-dark:     45% 0.022 24;   /* subtle text */
  --lch-ink-medium:   55% 0.020 22;   /* muted text (AA warm grey) */
  --lch-ink-light:    87% 0.009 20;   /* border */
  --lch-ink-lighter:  90.5% 0.008 20; /* subtle border */
  --lch-ink-lightest: 93.5% 0.005 20; /* sunken surface — chips, thumbs, placeholders */

  /* Surfaces. MapleDrop keeps a brand-warm tinted PAGE with white CARDS on top
     (separated by border + shadow), so canvas and page are distinct steps, not
     one flat background. */
  --lch-canvas: var(--lch-white);     /* cards, inputs, raised surfaces */
  --lch-page:   95.5% 0.01 18;        /* page background — maple-tinted */

  /* Brand maple-red ramp. */
  --lch-red-darkest:  30% 0.12 26;
  --lch-red-dark:     47% 0.16 25;    /* deep maple — hover/press (in-gamut at this L) */
  --lch-red-medium:   58% 0.23 26;    /* Maple Red ~#E4192B — primary/brand */
  --lch-red-light:    84% 0.07 22;
  --lch-red-lightest: 95% 0.03 20;    /* danger / mist surface */

  /* Success (green) ramp. */
  --lch-green-dark:     47% 0.13 155;
  --lch-green-medium:   56% 0.13 155;
  --lch-green-lightest: 95% 0.05 155; /* success surface */

  /* Featured (gold). */
  --lch-gold: 52% 0.12 75;   /* deep gold — AA as text on the light page/cards; brightened in dark below */

  /* Pine: a deliberately dark, elevated hero surface in BOTH themes (it does
     not invert with the ink ramp), with near-white text on it. */
  --lch-pine:    21% 0.014 25;
  --lch-onpine:  96% 0.004 25;

  /* Saturated foreground TEXT colors (links, up/down status). Kept as explicit
     tokens — NOT derived from the ramp — because on dark surfaces they must lift
     in lightness and drop in chroma for AA, independent of the red/green fills. */
  --lch-link:         47% 0.16 25;
  --lch-link-visited: 45% 0.06 27;
  --lch-up:           56% 0.13 155;
  --lch-down:         58% 0.23 26;

  /* Sunken thumbnail gradient. */
  --lch-thumb-from: 95% 0.004 20;
  --lch-thumb-to:   91% 0.005 20;

  /* ── Semantic aliases — the only layer components reference. ─────────────── */
  --color-black:         oklch(var(--lch-black));
  --color-canvas:        oklch(var(--lch-canvas));
  --color-bg:            oklch(var(--lch-page));
  --color-surface-sunken: oklch(var(--lch-ink-lightest));
  --color-ink:           oklch(var(--lch-ink-darkest));
  --color-text:          var(--color-ink);
  --color-text-subtle:   oklch(var(--lch-ink-dark));
  --color-text-muted:    oklch(var(--lch-ink-medium));
  --color-text-onpine:   oklch(var(--lch-onpine));
  --color-border:        oklch(var(--lch-ink-light));
  --color-border-subtle: oklch(var(--lch-ink-lighter));
  --color-pine:          oklch(var(--lch-pine));
  --color-primary:       oklch(var(--lch-red-medium));
  --color-primary-press: oklch(var(--lch-red-dark));
  /* Text on a primary (red) fill — fixed near-white, never the card surface. */
  --color-on-primary:    oklch(var(--lch-white));
  --color-link:          oklch(var(--lch-link));
  --color-link-visited:  oklch(var(--lch-link-visited));
  /* Status — two meanings only: success (savings, upvotes, ok) and danger
     (expired, downvotes, delete), each with a text color and a light fill. */
  --color-up:            oklch(var(--lch-up));
  --color-up-surface:    oklch(var(--lch-green-lightest));
  --color-down:          oklch(var(--lch-down));
  --color-down-surface:  oklch(var(--lch-red-lightest));
  --color-mist:          oklch(var(--lch-red-lightest));
  --color-featured:      oklch(var(--lch-gold));
  --color-mark:          oklch(var(--lch-gold) / 0.35);
  --color-thumb-from:    oklch(var(--lch-thumb-from));
  --color-thumb-to:      oklch(var(--lch-thumb-to));

  /* Hover/active overlays derive off ink, so they flip with the theme (a tint
     of near-white on dark, near-black on light). */
  --tint-ink-5:  oklch(var(--lch-ink-darkest) / 0.05);
  --tint-ink-10: oklch(var(--lch-ink-darkest) / 0.10);
  --tint-ink-20: oklch(var(--lch-ink-darkest) / 0.20);

  /* Native controls/scrollbars follow the theme; flipped to dark below.
     accent-color brands native checkboxes/radios/range with maple red (correct
     in both themes since --color-primary is theme-stable). */
  color-scheme: light;
  accent-color: var(--color-primary);

  /* radius / shadow / sizing. Shadows ride black alpha (Fizzy model), so they
     stay a true shadow in both themes; the dark block deepens the alpha. */
  --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.625rem;
  --radius-lg: 0.875rem; --radius-pill: 999px;
  --shadow-1: oklch(var(--lch-black) / 0.05);
  --shadow-2: oklch(var(--lch-black) / 0.10);
  --shadow-sm: 0 1px 2px var(--shadow-1), 0 1px 3px var(--shadow-1);
  --shadow-md: var(--shadow-sm), 0 4px 8px -2px var(--shadow-2);
  --shadow-lg: var(--shadow-md), 0 16px 32px -8px var(--shadow-2);
  --shadow-brand: 0 6px 20px oklch(var(--lch-red-medium) / 0.35);
  --component-sm: 2.25rem; --component-base: 2.5rem; --tap: 2.75rem;
  --input-padding-block: 0.625rem;
  --avatar-size: 1.5rem;
  --measure: 47.5rem;      /* the reading content column */
  --measure-wide: 75rem;   /* the top bar inner width — spans wider than content */

  --focus-ring-color: var(--color-primary);
}

/* Dark mode. Two triggers share one declaration list: an explicit
   data-color-scheme="dark" (a signed-in user who chose it), and
   prefers-color-scheme for everyone who hasn't pinned a theme (the "Same as OS"
   default + signed-out visitors). An explicit data-color-scheme="light" keeps
   the attribute, so the :not([data-color-scheme]) media selector never matches
   it and the OS preference is correctly ignored.

   The ink ramp INVERTS (darkest stays "most prominent ink", now near-white) so
   every component that references it is correct without per-property branching.
   Surfaces, the danger/success fills, and the saturated text colors are tuned
   for dark; the brand red FILL (--lch-red-medium/dark) is intentionally left at
   its light value so the brand stays the same red. KEEP THE TWO BLOCKS BELOW IN
   SYNC. */
:root[data-color-scheme="dark"] {
  --lch-ink-darkest:  96% 0.004 25;   /* near-white primary text */
  --lch-ink-darker:   86% 0.006 25;
  --lch-ink-dark:     74% 0.009 25;   /* subtle text */
  --lch-ink-medium:   67% 0.013 25;   /* muted text (AA on the dark page, incl. the sunken surface) */
  --lch-ink-light:    38% 0.012 25;   /* border */
  --lch-ink-lighter:  32% 0.011 25;   /* subtle border */
  --lch-ink-lightest: 27% 0.011 25;   /* sunken surface */
  --lch-canvas:       20% 0.012 25;   /* cards sit above the page */
  --lch-page:         15% 0.011 25;
  --lch-red-light:    40% 0.09 24;
  --lch-red-lightest: 33% 0.08 20;    /* danger surface */
  --lch-green-lightest: 33% 0.07 155; /* success surface */
  --lch-pine:         28% 0.03 158;   /* elevated faint-pine hero, not a glaring card */
  --lch-gold:         76% 0.13 75;    /* bright gold reads well (AA) on the dark cards */
  --lch-thumb-from:   30% 0.01 30;
  --lch-thumb-to:     36% 0.014 30;
  /* Saturated foregrounds lifted + de-chroma'd for AA on dark surfaces. */
  --lch-link:         72% 0.15 26;
  --lch-link-visited: 64% 0.10 27;
  --lch-up:           76% 0.13 155;
  --lch-down:         72% 0.16 26;
  --shadow-1: oklch(var(--lch-black) / 0.35);
  --shadow-2: oklch(var(--lch-black) / 0.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]) {
    --lch-ink-darkest:  96% 0.004 25;
    --lch-ink-darker:   86% 0.006 25;
    --lch-ink-dark:     74% 0.009 25;
    --lch-ink-medium:   67% 0.013 25;
    --lch-ink-light:    38% 0.012 25;
    --lch-ink-lighter:  32% 0.011 25;
    --lch-ink-lightest: 27% 0.011 25;
    --lch-canvas:       20% 0.012 25;
    --lch-page:         15% 0.011 25;
    --lch-red-light:    40% 0.09 24;
    --lch-red-lightest: 33% 0.08 20;
    --lch-green-lightest: 33% 0.07 155;
    --lch-pine:         28% 0.03 158;
    --lch-gold:         76% 0.13 75;
    --lch-thumb-from:   30% 0.01 30;
    --lch-thumb-to:     36% 0.014 30;
    --lch-link:         72% 0.15 26;
    --lch-link-visited: 64% 0.10 27;
    --lch-up:           76% 0.13 155;
    --lch-down:         72% 0.16 26;
    --shadow-1: oklch(var(--lch-black) / 0.35);
    --shadow-2: oklch(var(--lch-black) / 0.55);
    color-scheme: dark;
  }
}