/* ==========================================================================
   COLOR TOKENS
   Palette is oklch, neutral warm-gray base + one signature lime accent.
   Two layers: raw scale (--c-*) and semantic aliases (shadcn-compatible names,
   so utility classes like bg-background / text-muted-foreground keep working).
   ========================================================================== */

:root {
  /* ---- Raw neutral scale (warm gray, hue ~286) ---- */
  --c-white:      oklch(100%   0     0);
  --c-paper:      oklch(96.44% .0013 286.38);  /* page background, near-white */
  --c-mist:       oklch(94.31% 0     0);        /* muted fill */
  --c-line:       oklch(91.36% .006  239.83);   /* hairline border */
  --c-line-strong:oklch(88%    .005  286.2);    /* stronger divider */
  --c-ink-300:    oklch(70.8%  .01   286.2);    /* faint text (disabled) */
  --c-ink-500:    oklch(50.81% .0143 296.07);   /* secondary / muted text */
  --c-ink-700:    oklch(34%    .004  286.2);     /* body-strong */
  --c-ink-900:    oklch(18.72% .002  286.2);     /* near-black, primary ink */

  /* ---- Signature accent: bright lime-chartreuse ---- */
  --c-accent:      oklch(91.98% .1905 128.5);
  --c-accent-deep: oklch(78%    .18   128.5);    /* pressed / on-white legibility */
  --c-accent-soft: oklch(96.5%  .06   128.5);    /* soft wash background */

  /* ---- Status ---- */
  --c-success: oklch(72%    .16  150);
  --c-warning: oklch(80%    .15  85);
  --c-danger:  oklch(63.7%  .208 25.3);

  /* ===================== SEMANTIC ALIASES ===================== */
  --background: var(--c-paper);
  --foreground: var(--c-ink-900);

  --card: var(--c-white);
  --card-foreground: var(--c-ink-900);
  --popover: var(--c-white);
  --popover-foreground: var(--c-ink-900);

  --primary: var(--c-ink-900);
  --primary-foreground: var(--c-white);
  --secondary: var(--c-white);
  --secondary-foreground: var(--c-ink-900);

  --muted: var(--c-mist);
  --muted-foreground: var(--c-ink-500);

  --accent: var(--c-accent);
  --accent-foreground: var(--c-ink-900);

  --destructive: var(--c-danger);
  --destructive-foreground: var(--c-white);

  --border: var(--c-line);
  --border-strong: var(--c-line-strong);
  --input: var(--c-line-strong);
  --ring: var(--c-ink-900);

  /* ---- Authoring-friendly extra aliases ---- */
  --surface-page: var(--background);
  --surface-card: var(--card);
  --surface-muted: var(--muted);
  --surface-accent-soft: var(--c-accent-soft);
  --text-strong: var(--c-ink-900);
  --text-body: var(--c-ink-700);
  --text-muted: var(--c-ink-500);
  --text-faint: var(--c-ink-300);
  --line: var(--border);

  color-scheme: light;
}

/* ============================ DARK THEME ============================
   Opt-in via .dark or [data-theme="dark"]. Mirrors the reference dark set.
   The site itself ships light; dark is provided for completeness. */
.dark,
[data-theme="dark"] {
  --background: oklch(18.72% .002 286.2);
  --foreground: oklch(96.44% .0013 286.38);

  --card: oklch(23% .004 286.2);
  --card-foreground: oklch(96.44% .0013 286.38);
  --popover: oklch(23% .004 286.2);
  --popover-foreground: oklch(96.44% .0013 286.38);

  --primary: oklch(96.44% .0013 286.38);
  --primary-foreground: oklch(18.72% .002 286.2);
  --secondary: oklch(28% .006 286.2);
  --secondary-foreground: oklch(96.44% .0013 286.38);

  --muted: oklch(28% .006 286.2);
  --muted-foreground: oklch(70.8% .01 286.2);

  --accent: var(--c-accent);
  --accent-foreground: oklch(18.72% .002 286.2);

  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: oklch(98.5% 0 0);

  --border: oklch(100% 0 0 / .1);
  --border-strong: oklch(100% 0 0 / .18);
  --input: oklch(100% 0 0 / .15);
  --ring: oklch(80% .01 286.2);

  --surface-accent-soft: oklch(28% .05 128.5);
  --text-strong: var(--foreground);
  --text-body: oklch(88% .004 286.2);
  --text-muted: oklch(70.8% .01 286.2);
  --text-faint: oklch(55% .008 286.2);

  color-scheme: dark;
}