/* WanderPlan design tokens — v1
 *
 * Drop at app/static/css/tokens.css and load in base.html BEFORE the
 * Tailwind CDN script. No build step required.
 *
 * Everything is authored in oklch so the ramp is perceptually even and
 * dark mode is a lightness reflection rather than a second set of guesses.
 * Hex fallbacks are listed in comments for any consumer that needs them.
 */

:root {
  /* ---- Type faces -------------------------------------------------- */
  --wp-font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --wp-font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, monospace;

  /* ---- Type scale — two bands, two ratios -------------------------- */
  /* Text band, ratio 1.15. Hierarchy below body is carried by weight,
     case, colour and family — not by size. There is no room for it. */
  --wp-text-micro:   0.6875rem;  /* 11px · 600 · +.05em · uppercase */
  --wp-text-meta:    0.8125rem;  /* 13px · mono · 400 */
  --wp-text-body:    0.9375rem;  /* 15px · sans · 400 */
  /* Display band, ratio 1.30. */
  --wp-text-title:   1.0625rem;  /* 17px · 600 · -.01em */
  --wp-text-section: 1.375rem;   /* 22px · 600 · -.015em */
  --wp-text-page:    1.8125rem;  /* 29px · 700 · -.02em */
  --wp-text-hero:    2.375rem;   /* 38px · 700 · -.022em */

  --wp-lh-micro: 1.3;   --wp-lh-meta: 1.4;    --wp-lh-body: 1.55;
  --wp-lh-title: 1.35;  --wp-lh-section: 1.25;
  --wp-lh-page: 1.15;   --wp-lh-hero: 1.05;

  --wp-track-micro: 0.05em;   --wp-track-title: -0.01em;
  --wp-track-section: -0.015em;
  --wp-track-page: -0.02em;   --wp-track-hero: -0.022em;

  /* ---- Spacing — 4px base, dense low end --------------------------- */
  /* The collapsed three-party board is the stress case: the useful steps
     there are 2, 4, 6 and 8. The scale only opens up past 16. */
  --wp-space-unit: 4px;
  --wp-space-mult: 1;              /* overridden per density tier */
  --wp-space-0-5: calc(var(--wp-space-unit) * 0.5 * var(--wp-space-mult));
  --wp-space-1:   calc(var(--wp-space-unit) * 1 * var(--wp-space-mult));
  --wp-space-1-5: calc(var(--wp-space-unit) * 1.5 * var(--wp-space-mult));
  --wp-space-2:   calc(var(--wp-space-unit) * 2 * var(--wp-space-mult));
  --wp-space-3:   calc(var(--wp-space-unit) * 3 * var(--wp-space-mult));
  --wp-space-4:   calc(var(--wp-space-unit) * 4 * var(--wp-space-mult));
  --wp-space-5:   calc(var(--wp-space-unit) * 5 * var(--wp-space-mult));
  --wp-space-6:   calc(var(--wp-space-unit) * 6 * var(--wp-space-mult));
  --wp-space-8:   calc(var(--wp-space-unit) * 8 * var(--wp-space-mult));
  --wp-space-10:  calc(var(--wp-space-unit) * 10 * var(--wp-space-mult));
  --wp-space-12:  calc(var(--wp-space-unit) * 12 * var(--wp-space-mult));

  /* ---- Radius ------------------------------------------------------ */
  /* Small throughout — at board density a 12px corner eats content area
     and softens the status ring into a blob. */
  --wp-radius-sm: 3px;    /* chips, count pills, icon cells */
  --wp-radius-md: 5px;    /* cards, inputs, buttons */
  --wp-radius-lg: 8px;    /* panels, sheets */
  --wp-radius-xl: 12px;   /* modals, phone-frame surfaces */
  --wp-radius-full: 999px;/* party badges, count chips only */

  /* ---- Neutral ramp — hue 80, very low chroma (warm) --------------- */
  /* Warm enough that the cool party hues read as deliberate against it,
     neutral enough that photographs on Memories don't fight it. */
  --wp-n-0:   oklch(99.5% 0.003 80);  /* #fdfdfb */
  --wp-n-50:  oklch(97.6% 0.004 80);  /* #f8f7f4 */
  --wp-n-100: oklch(95.2% 0.005 80);  /* #f1f0ec */
  --wp-n-200: oklch(91%   0.006 80);  /* #e4e2dd */
  --wp-n-300: oklch(85.5% 0.008 80);  /* #d2cfc8 */
  --wp-n-400: oklch(72%   0.009 80);  /* #a9a69f */
  --wp-n-500: oklch(60.5% 0.010 80);  /* #87847d */
  --wp-n-600: oklch(50.5% 0.011 80);  /* #6a6760 */
  --wp-n-700: oklch(40.5% 0.012 78);  /* #504e48 */
  --wp-n-800: oklch(31%   0.014 75);  /* #3a3833 */
  --wp-n-900: oklch(23%   0.016 72);  /* #282621 */
  --wp-n-950: oklch(16%   0.016 70);  /* #191713 */

  /* Contrast on --wp-canvas:
       900  17.2:1   primary text
       700   8.9:1   secondary text
       600   5.6:1   muted text — the floor for anything readable
       500  and lighter: NEVER text. Borders, dividers, disabled fills,
                          placeholder glyphs only. */

  /* ---- Semantic surfaces ------------------------------------------- */
  --wp-canvas:  var(--wp-n-50);
  --wp-raised:  var(--wp-n-0);
  --wp-sunken:  var(--wp-n-100);
  --wp-overlay: var(--wp-n-0);
  --wp-border:  var(--wp-n-300);
  --wp-rule:    var(--wp-n-200);
  --wp-ink:     var(--wp-n-900);
  --wp-muted:   var(--wp-n-600);
  --wp-on-ink:  var(--wp-n-0);

  --wp-shadow-overlay:
    0 8px 24px -8px oklch(23% 0.016 72 / 0.18),
    0 2px 6px -2px oklch(23% 0.016 72 / 0.10);

  /* ---- Status — colour + pattern + weight, always together --------- */
  --wp-status-ok:    oklch(56% 0.14 150);  /* booked   · solid 2px  */
  --wp-status-warn:  oklch(64% 0.14 72);   /* warning  · dashed 2px */
  --wp-status-error: oklch(55% 0.20 27);   /* error    · solid 2px  */
  --wp-status-idea-ring: var(--wp-n-400);  /* idea     · solid 1.5px */
  --wp-status-idea-opacity: 0.55;

  /* ---- Party hues — fixed L 52%, C 0.13, across the 185–340 arc ---- */
  /* The whole range left once green, amber and red are excluded.
     Equal lightness means no party looks more important than another. */
  --wp-party-1: oklch(52% 0.13 185);  /* teal     */
  --wp-party-2: oklch(52% 0.13 230);  /* azure    */
  --wp-party-3: oklch(52% 0.13 268);  /* indigo   */
  --wp-party-4: oklch(52% 0.13 305);  /* violet   */
  --wp-party-5: oklch(52% 0.13 340);  /* magenta  */
  /* A sixth party gets a PATTERN, not a hue: party-1 with a 45° hairline
     stripe on the badge fill. A sixth hue drops the minimum separation
     below what is distinguishable at 22px. */

  --wp-party-1-surface: oklch(95.5% 0.03 185);
  --wp-party-2-surface: oklch(95.5% 0.03 230);
  --wp-party-3-surface: oklch(95.5% 0.03 268);
  --wp-party-4-surface: oklch(95.5% 0.03 305);
  --wp-party-5-surface: oklch(95.5% 0.03 340);

  --wp-party-1-border: oklch(84% 0.06 185);
  --wp-party-2-border: oklch(84% 0.06 230);
  --wp-party-3-border: oklch(84% 0.06 268);
  --wp-party-4-border: oklch(84% 0.06 305);
  --wp-party-5-border: oklch(84% 0.06 340);

  /* ---- Controls ---------------------------------------------------- */
  --wp-control-h: 36px;          /* desktop */
  --wp-control-h-touch: 48px;    /* coarse pointer */
  --wp-hit-min: 44px;            /* never smaller, on any device */
}

/* ---- Density — root font-size AND a spacing multiplier AND line-height.
   Three levers, not one. That is what makes the tiers read as different
   densities rather than three zoom levels. ---------------------------- */
html[data-density="compact"]        { font-size: 14px; --wp-space-mult: 0.8;  }
html[data-density="regular"]        { font-size: 16px; --wp-space-mult: 1;    }
html[data-density="spacious"]       { font-size: 18px; --wp-space-mult: 1.15; }
html[data-density="extra_spacious"] { font-size: 20px; --wp-space-mult: 1.3;  }

/* ---- Viewport clamps — same ratios, two clamps.
   Density is a preference; viewport is a fact. They stay orthogonal. --- */
@media (max-width: 640px) {
  :root {
    --wp-text-micro: 0.75rem;    /* floor rises 11 → 12px: glare + thumb  */
    --wp-text-page: 1.375rem;    /* Page collapses onto Section           */
  }
}

/* ---- Dark ---------------------------------------------------------- */
html[data-theme="dark"] {
  --wp-canvas:  oklch(17.5% 0.010 75);
  --wp-raised:  oklch(21.5% 0.011 75);
  --wp-sunken:  oklch(14%   0.010 75);
  --wp-overlay: oklch(25.5% 0.012 75);
  --wp-border:  oklch(30%   0.012 75);
  --wp-rule:    oklch(24%   0.011 75);
  --wp-ink:     oklch(95%   0.005 80);
  --wp-muted:   oklch(72%   0.008 80);
  --wp-on-ink:  oklch(18%   0.010 75);

  --wp-shadow-overlay: 0 8px 24px -8px oklch(5% 0 0 / 0.6);

  /* Status rings gain 0.5px in dark — thin coloured lines on dark
     surfaces read thinner than they are. See rules.css. */
  --wp-status-ok:    oklch(74% 0.13 150);
  --wp-status-warn:  oklch(80% 0.13 78);
  --wp-status-error: oklch(70% 0.17 27);
  --wp-status-idea-ring: oklch(45% 0.012 75);

  --wp-party-1: oklch(76% 0.11 185);
  --wp-party-2: oklch(76% 0.11 230);
  --wp-party-3: oklch(76% 0.11 268);
  --wp-party-4: oklch(76% 0.11 305);
  --wp-party-5: oklch(76% 0.11 340);

  --wp-party-1-surface: oklch(27% 0.045 185);
  --wp-party-2-surface: oklch(27% 0.045 230);
  --wp-party-3-surface: oklch(27% 0.045 268);
  --wp-party-4-surface: oklch(27% 0.045 305);
  --wp-party-5-surface: oklch(27% 0.045 340);

  --wp-party-1-border: oklch(40% 0.07 185);
  --wp-party-2-border: oklch(40% 0.07 230);
  --wp-party-3-border: oklch(40% 0.07 268);
  --wp-party-4-border: oklch(40% 0.07 305);
  --wp-party-5-border: oklch(40% 0.07 340);
}