/*
 * Design tokens — COLORS are ours; non-color tokens come from Open Props.
 *
 * Left unlayered on purpose: these are custom-property definitions (variables),
 * not competing rules, so they don't need to sit in a cascade layer.
 *
 * Color model: semantic tokens (--ink, --canvas, --site-bg, --line, --accent)
 * that components read. The site background is driven by a rotating account tint
 * (--tint); dark mode overrides the structural neutrals. The brand is the
 * "syo-ro" teal ramp (hue ~180). See docs/concepts/theme-background-colors.md for the full
 * rationale. Tint values are the Tailwind v4 palette's -100 shades (olive, taupe,
 * mauve, mist, zinc), written as OKLCH literals since there's no Tailwind build.
 */
:root {
  color-scheme: light dark;

  /* --- spacing alias (Open Props supplies the scale) --- */
  --u-pad: var(--size-3); /* 1rem — the standard pad unit; half/double derive from it */

  /* --- type / radius / elevation aliases (Open Props) --- */
  /* Atkinson Hyperlegible is the default sans (self-hosted, see fonts.css). This
     :root rule wins over Open Props' --font-sans (set at :where(html)), so
     --font-body and everything downstream inherit it. */
  --font-sans: "Atkinson Hyperlegible", var(--font-system-ui, system-ui, sans-serif);
  --font-body: var(--font-sans, system-ui, sans-serif);
  --radius-ui: var(--radius-2);
  --radius-card: var(--radius-3);
  --elevation-card: var(--shadow-2);

  /* --- structural colors (light) --- */
  --neutral-bg: oklch(92% 0.004 286.32);    /* fallback when no tint set (= zinc-200) */
  --tint: var(--neutral-bg);                /* rotating account tint slots in here */
  --site-bg: var(--tint);                   /* the outer page */
  --canvas: #ffffff;                        /* card / article surface */
  --ink: oklch(0.22 0.01 260);              /* primary text */
  --ink-muted: oklch(0.55 0.01 260);        /* secondary text */
  --line: oklch(0.92 0.004 260);            /* borders / hairlines */
  --scrim: oklch(0% 0 0 / 0.4);             /* overlay behind modals & bottom sheets */
  --fill-subtle: oklch(96% 0.004 260);      /* subtle neutral fill: code bg, quiet hovers */

  /* --- code syntax highlighting (GitHub light palette) --- */
  --code-att:         #d73a49;
  --code-comment:     #6a737d;
  --code-function:    #6f42c1;
  --code-operator:    #d73a49;
  --code-property:    #005cc5;
  --code-punctuation: #24292e;
  --code-selector:    #22863a;
  --code-variable:    #e36209;

  /* --- brand: the "syo-ro" teal ramp (hue ~180); tokens map to ramp shades --- */
  --brand-deep:   oklch(0.173 0.028 177.86); /* syo-ro-950 — deep bg, sidebars, strong text */
  --brand-strong: oklch(0.312 0.049 180.39); /* syo-ro-800 — solid fill for white text (12.8:1 AAA) */
  --brand-muted:  oklch(0.398 0.063 179.53); /* syo-ro-700 — secondary borders, inactive states */
  --brand:        oklch(0.577 0.091 179.50); /* syo-ro-500 — key interactive: buttons, progress, borders */

  --primary-fill: var(--brand-muted);        /* syo-ro-700 — primary button fill (a level lighter than --brand-strong; white text 9.0:1). Dark mode keeps the darker --brand-strong. */

  --accent: var(--brand);                    /* interactive color the components read */
  --accent-ink: var(--brand-deep);           /* dark teal text reads on the brand fill */
  --accent-soft: oklch(0.948 0.066 179.56);  /* syo-ro-50 — subtle fill: hover / selected */
  --menu-context-bg: oklch(0.312 0.049 180.39); /* syo-ro-800 — AAA with near-white ink */
  --menu-context-ink: oklch(0.98 0.012 180);    /* near-white teal on the dark teal */

  /* AAA (7:1) foregrounds — muted metadata intentionally stays AA */
  --link: oklch(0.398 0.063 179.53);         /* syo-ro-700 — teal link on the canvas (9.0:1, underlined) */
  --ink-on-soft: oklch(0.398 0.063 179.53);  /* syo-ro-700 — text on --accent-soft (7.9:1): initials, badge */
  --brand-text: oklch(0.398 0.063 179.53);   /* syo-ro-700 — teal-tinted body text at 9.0:1 on the canvas */

  /* semantic surfaces + AAA inks (light pills; shared by badges + alerts) */
  --success-surface: oklch(94% 0.06 150);
  --success-ink:     oklch(41% 0.12 150);
  --warning-surface: oklch(95% 0.08 85);
  --warning-ink:     oklch(42.7% 0.11 70);
  --danger-surface:  oklch(94% 0.05 25);
  --danger-ink:      oklch(42.6% 0.18 25);
  --danger-solid:    oklch(48% 0.16 25);     /* dark red for white text (AAA) */
}

/* --- rotating light-mode tints (Tailwind v4 palette, -200 shades) --- */
[data-tint="olive"] { --tint: oklch(93%   0.007 106.5);   } /* olive-200 */
[data-tint="taupe"] { --tint: oklch(92.2% 0.005  34.3);   } /* taupe-200 */
[data-tint="mauve"] { --tint: oklch(92.2% 0.005 325.62);  } /* mauve-200 */
[data-tint="mist"]  { --tint: oklch(92.5% 0.005 214.3);   } /* mist-200 */
[data-tint="zinc"]  { --tint: oklch(92%   0.004 286.32);  } /* zinc-200 */

/*
 * Re-declare --site-bg on the SAME element that carries the tint. var(--tint)
 * substitutes using that element's own --tint, so the background tracks the tint
 * whether it sits on <html> or a descendant. Without this, --site-bg would stay
 * frozen at the value it computed up on :root. (Dark mode below overrides this.)
 */
[data-tint] { --site-bg: var(--tint); }

/*
 * Dark mode. Placed AFTER the tint rules so that when an element carries both
 * data-tint and data-theme="dark" (equal specificity), dark wins and pins the
 * site background to near-black regardless of tint. Applies via explicit
 * [data-theme="dark"] or the OS preference when no explicit theme is set.
 */
[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* left intentionally empty here; real values below to keep the OS fallback clean */
}

[data-theme="dark"] {
  --canvas: #1f2937;                        /* gray-800 — article/canvas */
  --site-bg: #030712;                       /* gray-950 — outer page (ignores tint) */
  --ink: oklch(0.93 0.006 260);
  --ink-muted: oklch(0.68 0.01 260);
  --line: oklch(0.34 0.01 260);
  --fill-subtle: oklch(0.33 0.01 260);      /* a step lighter than the dark canvas */

  /* code syntax (GitHub dark palette) */
  --code-att:         #ff7b72;
  --code-comment:     #8b949e;
  --code-function:    #d2a8ff;
  --code-operator:    #ff7b72;
  --code-property:    #79c0ff;
  --code-punctuation: #c9d1d9;
  --code-selector:    #7ee787;
  --code-variable:    #ffa657;
  --accent: var(--brand);                   /* same vibrant teal pops on dark */
  --accent-ink: var(--brand-deep);
  --primary-fill: var(--brand-strong);            /* keep the darker fill on dark */
  --accent-soft: oklch(0.22 0.035 179.11);        /* syo-ro-900 */
  --menu-context-bg: oklch(0.735 0.116 179.27);   /* syo-ro-300 — AAA with dark teal ink */
  --menu-context-ink: var(--brand-deep);          /* syo-ro-950 dark teal on the light teal */
  --link: oklch(0.819 0.13 179.39);               /* syo-ro-200 — light teal link (8.9:1 on canvas) */
  --ink-on-soft: oklch(0.819 0.13 179.39);        /* syo-ro-200 on soft-900 (10.3:1) */
  --brand-text: oklch(0.819 0.13 179.39);         /* syo-ro-200 (8.9:1 on canvas) */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #1f2937;
    --site-bg: #030712;
    --ink: oklch(0.93 0.006 260);
    --ink-muted: oklch(0.68 0.01 260);
    --line: oklch(0.34 0.01 260);
    --fill-subtle: oklch(0.33 0.01 260);

    /* code syntax (GitHub dark palette) */
    --code-att:         #ff7b72;
    --code-comment:     #8b949e;
    --code-function:    #d2a8ff;
    --code-operator:    #ff7b72;
    --code-property:    #79c0ff;
    --code-punctuation: #c9d1d9;
    --code-selector:    #7ee787;
    --code-variable:    #ffa657;
    --accent: var(--brand);
    --accent-ink: var(--brand-deep);
    --primary-fill: var(--brand-strong);
    --accent-soft: oklch(0.22 0.035 179.11);        /* syo-ro-900 */
    --menu-context-bg: oklch(0.735 0.116 179.27);   /* syo-ro-300 */
    --menu-context-ink: var(--brand-deep);          /* syo-ro-950 */
    --link: oklch(0.819 0.13 179.39);               /* syo-ro-200 (8.9:1 on canvas) */
    --ink-on-soft: oklch(0.819 0.13 179.39);        /* syo-ro-200 on soft-900 (10.3:1) */
    --brand-text: oklch(0.819 0.13 179.39);         /* syo-ro-200 */
  }
}