/*
 * tripboard.css — TripBoard web design tokens (CI source of truth for the web).
 *
 * Ported from the app repo's `New Design/src/theme.jsx` (Nils-22/TripBoard):
 * Sunset accent (the app default), oklch light/dark palettes, comfy density
 * scale, and the SF type stacks. Dark mode follows the system via
 * `prefers-color-scheme`. Token names map 1:1 to the theme.jsx palette keys
 * (bg, bgElev, ink, inkMuted, accentSoft, … → --bg, --bg-elev, --ink,
 * --ink-muted, --accent-soft, …).
 *
 * Keep this file in sync with theme.jsx — change tokens there first, then
 * mirror here (ownership recorded in TripBoard's docs/SYSTEM_SPEC.md).
 */

:root {
  color-scheme: light dark;

  /* ---- Accent: Sunset (ACCENTS.sunset) ---- */
  --accent:      oklch(66% 0.17 42);   /* base */
  --accent-soft: oklch(94% 0.04 45);   /* soft (light) */
  --accent-ink:  oklch(38% 0.11 42);   /* ink-on-soft (light) */

  /* ---- Surfaces (lightPalette) ---- */
  --bg:        oklch(98% 0.004 80);    /* warm off-white */
  --bg-elev:   #ffffff;
  --bg-sunken: oklch(96% 0.006 80);
  --card:      #ffffff;
  --card-alt:  oklch(97% 0.006 80);

  /* ---- Text ---- */
  --ink:        oklch(18% 0.01 70);
  --ink-muted:  oklch(45% 0.01 70);
  --ink-subtle: oklch(62% 0.01 70);

  /* ---- Borders ---- */
  --border:      oklch(90% 0.008 70);
  --border-soft: oklch(94% 0.006 70);

  /* ---- Status ---- */
  --success: oklch(58% 0.12 150);
  --warn:    oklch(70% 0.15 75);
  --danger:  oklch(58% 0.17 25);

  /* ---- Density: comfy (DENSITY.comfy), compact variants alongside ---- */
  --radius:          18px;
  --radius-compact:  14px;
  --gap:             12px;
  --gap-compact:     8px;
  --card-pad:        18px;
  --card-pad-compact: 14px;
  --row-height:         60px;
  --row-height-compact: 48px;

  /* ---- Type (TYPE / TYPE_MODES.sans) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    'SF Pro Display', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'SF Pro Text', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  --title-size:         2rem;     /* 32px comfy */
  --title-size-compact: 1.75rem;  /* 28px compact */
  --display-weight: 600;          /* TYPE_MODES.sans serifWeight */
}

/* Dark palette (darkPalette + sunset softDark / computed dark accent-ink) */
@media (prefers-color-scheme: dark) {
  :root {
    --accent-soft: oklch(32% 0.07 45);
    --accent-ink:  oklch(88% 0.10 42);

    --bg:        oklch(14% 0.008 60);  /* warm near-black */
    --bg-elev:   oklch(18% 0.009 60);
    --bg-sunken: oklch(11% 0.008 60);
    --card:      oklch(20% 0.01 60);
    --card-alt:  oklch(23% 0.01 60);

    --ink:        oklch(97% 0.005 80);
    --ink-muted:  oklch(72% 0.008 70);
    --ink-subtle: oklch(55% 0.008 70);

    --border:      oklch(28% 0.012 60);
    --border-soft: oklch(23% 0.01 60);

    --success: oklch(68% 0.14 150);
    --warn:    oklch(78% 0.16 75);
    --danger:  oklch(68% 0.18 25);
  }
}