/* ============================================================
 * TIDE v0.1 — 29Court design system · TOKENS            DRAFT
 * "Premium beach, like a beach you swim at."
 *
 * EXTENDS 29Court Design Language v2 (ideas.29court.com/
 * design-system/tokens.css). The brand stays: coral is still
 * the one action/money colour, the --29d-* names still resolve,
 * Melee Night is still the ancestor of dark mode. Tide adds:
 *   - sun-bleached sand neutrals (re-pointing --29d-bg/surface)
 *   - a sea-glass accent ramp + glass panes tinted sea-glass
 *   - late-afternoon light (one long soft shadow, warm hairlines)
 *   - calm motion: ease-out .22,1,.36,1 + gentle springs
 *   - the five live knobs every component reads:
 *       --speed  --bounce  --corner  --density  --accent
 * Dark = night beach: deep navy-ink, moon-sand ink, never #000.
 * Theme: [data-theme] on <html>, shared key sh29core_theme
 * (the Shell's Toggle Law); first visit follows the OS.
 * ============================================================ */
@layer c29.reset, c29.tokens, c29.base, c29.components, c29.utilities, c29.page;

@layer c29.tokens {
:root {
  color-scheme: light dark;

  /* ---------- brand coral (verbatim from v2: the money colour) ---------- */
  --29d-coral-50:#FFF4EE; --29d-coral-100:#FFE4D4; --29d-coral-200:#FFC8A6;
  --29d-coral-300:#FF9E70; --29d-coral-400:#FB7E54; --29d-coral-500:#F46036;
  --29d-coral-600:#C7471F; --29d-coral-700:#B03D1C; --29d-coral-800:#8A3018;
  --29d-on-coral:#FFFFFF;

  /* ---------- sand (sun-bleached neutrals) ---------- */
  --sand-0:  #FFFDF8;   /* foam: raised panes */
  --sand-50: #FBF7EF;   /* dry sand: cards */
  --sand-100:#F5EFE3;   /* page */
  --sand-200:#ECE3D2;   /* wet line: wells */
  --sand-300:#E2D6C0;   /* hairline */
  --sand-400:#CDBEA3;   /* strong hairline */

  /* ---------- sea-glass ---------- */
  --sea-50: #EEF7F4; --sea-100:#DAEFE9; --sea-200:#B9E0D6; --sea-300:#8DCABD;
  --sea-400:#5FB2A3; --sea-500:#3C978A; --sea-600:#2A7C71; --sea-700:#1F6158;

  /* ---------- late-afternoon light ---------- */
  --sun-100:#FCEBD0; --sun-300:#F2C98A; --sun-500:#E7A956;

  /* ---------- ink: ocean slate / driftwood ---------- */
  --ink-1:#1E2A30; --ink-2:#46535A; --ink-3:#717C81; --ink-4:#A3AAAA; --ink-5:#CFD1CC;

  /* ---------- semantic, re-pointed (v2 names keep working) ---------- */
  --29d-bg:var(--sand-100); --29d-surface:var(--sand-50); --29d-raised:var(--sand-0);
  --29d-overlay:var(--sand-0); --29d-sunken:var(--sand-200);
  --29d-text-1:var(--ink-1); --29d-text-2:var(--ink-2); --29d-text-3:var(--ink-3);
  --29d-text-4:var(--ink-4); --29d-text-5:var(--ink-5);
  --29d-border:var(--sand-300); --29d-border-strong:var(--sand-400);
  --29d-teal-600:var(--sea-600); --29d-teal-100:var(--sea-100);
  --29d-green-600:#2E8B4E; --29d-green-100:#DFF3E5;
  --29d-amber-600:#B07414; --29d-amber-100:#FBEFD8;
  --29d-red-600:#C8473F;   --29d-red-100:#FBE6E3;

  --bg:var(--29d-bg); --surface:var(--29d-surface); --raised:var(--29d-raised); --sunken:var(--29d-sunken);
  --ink:var(--ink-1); --ink-soft:var(--ink-2); --ink-mute:var(--ink-3); --ink-faint:var(--ink-4);
  --edge:color-mix(in srgb, var(--sand-400) 70%, transparent);
  --edge-soft:color-mix(in srgb, var(--sand-300) 80%, transparent);
  --wash:color-mix(in srgb, var(--ink-1) 5%, transparent);
  --wash-2:color-mix(in srgb, var(--ink-1) 9%, transparent);
  --money:var(--29d-coral-600); --on-money:var(--29d-on-coral);
  --ok:var(--29d-green-600); --warn:var(--29d-amber-600); --bad:var(--29d-red-600);
  --ok-bg:var(--29d-green-100); --warn-bg:var(--29d-amber-100); --bad-bg:var(--29d-red-100);

  /* ---------- glass, tinted sea-glass (modest blur: beach, not tech) ---------- */
  --pane: color-mix(in srgb, var(--sea-50) 62%, transparent);
  --pane-strong: color-mix(in srgb, var(--sand-0) 82%, transparent);
  --pane-edge: color-mix(in srgb, #fff 70%, transparent);
  --pane-blur: 14px;
  --sheen: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%);

  /* ---------- light, not shadows ---------- */
  --hair: 0 0 0 1px var(--edge-soft);
  --lift: 0 0 0 1px var(--edge-soft), 0 20px 44px -18px rgba(92,70,40,.22), 0 2px 6px -2px rgba(92,70,40,.08);
  --lift-hi: 0 0 0 1px var(--edge-soft), 0 34px 64px -20px rgba(92,70,40,.30), 0 4px 10px -4px rgba(92,70,40,.10);
  --glow: radial-gradient(120% 80% at 85% -10%, color-mix(in srgb, var(--sun-300) 55%, transparent), transparent 60%),
          radial-gradient(90% 70% at -10% 110%, color-mix(in srgb, var(--sea-200) 55%, transparent), transparent 60%);

  /* ---------- type ---------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Nunito", "Quicksand", ui-rounded, -apple-system, "SF Pro Rounded", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-cap:12px; --fs-sm:14px; --fs-body:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;
  --lh-body:1.5; --track-head:-0.02em; --track-cap:.06em;

  /* ---------- the five knobs (inherited; set on any element to tune its subtree) ---------- */
  --speed: 1;          /* 0.5 lazy … 2 brisk. Divides every duration */
  --bounce: .35;       /* 0 critical … 1 lively. Feeds overshoot curve + JS springs */
  --corner: 20px;      /* outer radius; inner = corner - pad (concentric rule) */
  --density: 1;        /* 0.75 compact … 1.25 airy. Scales spacing */
  --accent: var(--sea-600);
  --on-accent: #FFFFFF;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));

  /* ---------- space (4pt, scaled by --density) ---------- */
  --s1:calc(4px * var(--density)); --s2:calc(8px * var(--density)); --s3:calc(12px * var(--density));
  --s4:calc(16px * var(--density)); --s5:calc(20px * var(--density)); --s6:calc(24px * var(--density));
  --s8:calc(32px * var(--density)); --s12:calc(48px * var(--density));
  --tap: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);

  /* ---------- radius ---------- */
  --r-sm:10px; --r-md:14px; --r-pill:999px;

  /* ---------- motion ---------- */
  --ease: cubic-bezier(.22,1,.36,1);              /* the wave settling */
  --ease-sheet: cubic-bezier(.32,.72,0,1);         /* iOS sheet */
  --ease-give: cubic-bezier(.24, calc(1 + .5 * var(--bounce)), .38, 1); /* gentle overshoot, tuned by --bounce */
  --d1: calc(160ms / var(--speed)); --d2: calc(220ms / var(--speed));
  --d3: calc(320ms / var(--speed)); --d4: calc(420ms / var(--speed)); --d5: calc(480ms / var(--speed));
  --shimmer-period: 3s;                            /* sunlight on water, slow */

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ---------- NIGHT BEACH ---------- */
[data-theme="dark"] {
  --sand-0:#1A2C3D; --sand-50:#132233; --sand-100:#0C1824; --sand-200:#08121C;
  --sand-300:rgba(196,214,224,.12); --sand-400:rgba(196,214,224,.22);
  --sea-50:#10302E; --sea-100:#123A37; --sea-200:#1C5550; --sea-600:#62C9B7; --sea-700:#8FDCCD;
  --sun-300:#C08442;
  --ink-1:#EDE7DA; --ink-2:#B9C2C4; --ink-3:#84929A; --ink-4:#5A6B76; --ink-5:#33475A;
  --29d-coral-600:#FB8B4C; --29d-coral-500:#FFA25E; --29d-coral-700:#FFB37C; --29d-coral-100:#33231A;
  --29d-on-coral:#2A1503;
  --29d-green-600:#62CF95; --29d-green-100:#0F2A20; --29d-amber-600:#F2B04C; --29d-amber-100:#2E2310;
  --29d-red-600:#F2837E; --29d-red-100:#341C1D;
  --edge:rgba(196,214,224,.20); --edge-soft:rgba(196,214,224,.11);
  --wash:rgba(200,225,235,.06); --wash-2:rgba(200,225,235,.10);
  --accent: var(--sea-600); --on-accent:#06201C;
  --pane: rgba(98,201,183,.07); --pane-strong: rgba(19,34,51,.86); --pane-edge: rgba(200,235,240,.14);
  --sheen: linear-gradient(180deg, rgba(220,240,255,.07), rgba(255,255,255,0) 40%);
  --lift: 0 0 0 1px var(--edge-soft), 0 22px 48px -18px rgba(0,6,14,.7), 0 2px 6px -2px rgba(0,6,14,.4);
  --lift-hi: 0 0 0 1px var(--edge-soft), 0 36px 70px -20px rgba(0,6,14,.8), 0 4px 10px -4px rgba(0,6,14,.5);
  --glow: radial-gradient(120% 80% at 85% -10%, rgba(232,220,180,.10), transparent 55%),
          radial-gradient(90% 70% at -10% 110%, rgba(98,201,183,.12), transparent 60%);
}
}