/* tokens.css — Kuchup shared design layer, layer 1 of 2.
   Part A: design-tokens.css copied verbatim from main (brand palette, status colours, radius, fonts, spacing).
   Part B: v2.1 semantic additions (type scale, tap target, hairline, flat button, quiet elevation). */

/* Hallmark · genre: modern-minimal · design-system: design.md · designed-as-app
 * Warm Horizon · Kuchup logo palette (navy + orange) · light theme
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · tokens: pass (48)
 */

:root {
  color-scheme: light;

  /* Warm, optimistic base with open-sky supporting surfaces */
  --color-paper: #fcfaf7;
  --color-paper-2: #f2f7fa;
  --color-paper-3: #e4f0f6;
  --color-ink: #0e3a69;
  --color-ink-2: #345c7c;
  --color-muted: #5d7488;
  --color-rule: #a9c1d1;
  --color-accent: #ff6b35;
  --color-accent-hover: #ff7f52;
  --color-accent-deep: #d94f1f;
  --color-accent-soft: rgba(255, 107, 53, 0.14);
  --color-accent-2: #0e3a69;
  --color-accent-ink: #082743;
  --color-focus: #ff6b35;

  /* Status primitives — chip-scale meaning, not a second brand accent */
  --color-status-sky: oklch(48% 0.12 240);
  --color-status-green: oklch(44% 0.13 150);
  --color-status-violet: oklch(46% 0.11 295);
  --color-status-crimson: oklch(48% 0.16 20);
  --color-status-ochre: oklch(55% 0.13 80);
  --color-status-slate: oklch(46% 0.03 250);
  --color-status-teal: oklch(45% 0.08 195);

  /* Base (panel / marketing shared names) */
  --bg-base: var(--color-paper);
  --bg-surface: var(--color-paper);
  --bg-surface-hover: var(--color-paper-2);

  /* Thin, calm boundaries; navy is reserved for emphasis */
  --border-subtle: #d1e0e9;
  --border-hover: #7fa2bb;

  /* Orange leads brand chrome; status hues carry workbench meaning */
  --accent-primary: var(--color-accent);
  --accent-primary-hover: var(--color-accent-hover);
  --accent-blue: var(--color-status-sky);
  --accent-purple: var(--color-status-violet);
  --accent-green: var(--color-status-green);

  --accent-primary-soft: var(--color-accent-soft);
  --accent-blue-soft: color-mix(in srgb, var(--color-status-sky) 14%, var(--color-paper));
  --accent-purple-soft: color-mix(in srgb, var(--color-status-violet) 14%, var(--color-paper));
  --accent-green-soft: color-mix(in srgb, var(--color-status-green) 14%, var(--color-paper));

  /* Text */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-2);
  --text-muted: var(--color-muted);
  --text-on-accent: var(--color-accent-ink);

  /* Atmosphere — no multi-hue glow carnival */
  --glow-blue: radial-gradient(circle, transparent 0%, transparent 70%);
  --glow-purple: radial-gradient(circle, transparent 0%, transparent 70%);
  --glow-orange: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 35%, transparent) 0%, transparent 70%);

  /* Gentle elevation — welcoming, not poster-heavy */
  --shadow-card: 0 8px 24px rgba(14, 58, 105, 0.1);
  --shadow-sm: 0 2px 8px rgba(14, 58, 105, 0.12);
  --shadow-button: 0 3px 0 var(--color-accent-deep), 0 8px 16px -8px rgba(255, 107, 53, 0.45);
  --shadow-button-hover: 0 4px 0 var(--color-accent-deep), 0 12px 22px -10px rgba(255, 107, 53, 0.5);
  --shadow-button-pressed: 0 1px 0 var(--color-accent-deep), 0 3px 8px -5px rgba(255, 107, 53, 0.4);
  --radius-card: 1rem;
  --radius-button: 999px;
  --radius-pill: 999px;
  --radius-input: 0.75rem;
  --control-height: 2.75rem;
  --control-pad-x: 0.85rem;
  --control-font: 0.8125rem;
  --control-line: 1;
  --ease-snap: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 180ms;

  /* 4-point named spacing scale (design.md) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Typography stacks (faces loaded by page) */
  --font-display: "Lexend", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-inter: var(--font-body);

  /* Panel aliases — keep existing class names working */
  --bg: var(--bg-base);
  --bg-elevated: var(--bg-surface);
  --surface: var(--bg-surface);
  --surface2: var(--bg-surface-hover);
  --surface-hover: var(--bg-surface-hover);
  --border: var(--border-subtle);
  --border-strong: var(--color-rule);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --accent: var(--accent-primary);
  --accent-hover: var(--accent-primary-hover);
  --accent-soft: var(--accent-primary-soft);
  --intent: var(--color-status-sky);
  --intent-soft: color-mix(in srgb, var(--color-status-sky) 14%, var(--color-paper));
  --success: var(--color-status-green);
  --success-soft: color-mix(in srgb, var(--color-status-green) 14%, var(--color-paper));
  --pending: var(--color-status-violet);
  --pending-soft: color-mix(in srgb, var(--color-status-violet) 14%, var(--color-paper));
  --danger: var(--color-status-crimson);
  --danger-soft: color-mix(in srgb, var(--color-status-crimson) 14%, var(--color-paper));
  --dismiss: var(--color-status-ochre);
  --dismiss-soft: color-mix(in srgb, var(--color-status-ochre) 14%, var(--color-paper));
  --memory: var(--color-status-slate);
  --memory-soft: color-mix(in srgb, var(--color-status-slate) 14%, var(--color-paper));
  --warn: var(--dismiss);
  --warn-soft: var(--dismiss-soft);
  --referral: var(--pending);
  --referral-soft: var(--pending-soft);
  --visa: var(--color-status-teal);
  --visa-soft: color-mix(in srgb, var(--color-status-teal) 14%, var(--color-paper));
  --brand-sky: var(--color-status-sky);
  --brand-sky-soft: var(--intent-soft);
  --brand-gradient: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-primary-hover) 100%
  );
  --brand-gradient-soft: linear-gradient(
    135deg,
    var(--accent-primary-soft) 0%,
    color-mix(in srgb, var(--color-accent) 8%, var(--color-paper)) 100%
  );
  --radius: var(--radius-card);
  --radius-sm: 0.625rem;
  --shadow: var(--shadow-card);

  /* Structure helpers */
  --rule-width: 1px;
  --shadow-offset: 0px;
  --shadow-offset-sm: 0px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper: #0c1a2e;
  --color-paper-2: #0f2238;
  --color-paper-3: #152a42;
  --color-ink: #e8f1f8;
  --color-ink-2: #b8ccde;
  --color-muted: #8fa3b8;
  --color-rule: #3d5568;
  --color-accent-soft: rgba(255, 107, 53, 0.2);
  --color-accent-2: #7eb8e8;

  --bg-base: var(--color-paper);
  --bg-surface: var(--color-paper-2);
  --bg-surface-hover: var(--color-paper-3);

  --border-subtle: #243649;
  --border-hover: #4a6a85;

  --accent-blue-soft: color-mix(in srgb, var(--color-status-sky) 18%, var(--color-paper));
  --accent-purple-soft: color-mix(in srgb, var(--color-status-violet) 18%, var(--color-paper));
  --accent-green-soft: color-mix(in srgb, var(--color-status-green) 18%, var(--color-paper));

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-button: 0 3px 0 var(--color-accent-deep), 0 8px 16px -8px rgba(255, 107, 53, 0.35);
  --shadow-button-hover: 0 4px 0 var(--color-accent-deep), 0 12px 22px -10px rgba(255, 107, 53, 0.4);
  --shadow-button-pressed: 0 1px 0 var(--color-accent-deep), 0 3px 8px -5px rgba(255, 107, 53, 0.35);

  --intent-soft: color-mix(in srgb, var(--color-status-sky) 18%, var(--color-paper));
  --success-soft: color-mix(in srgb, var(--color-status-green) 18%, var(--color-paper));
  --pending-soft: color-mix(in srgb, var(--color-status-violet) 18%, var(--color-paper));
  --danger-soft: color-mix(in srgb, var(--color-status-crimson) 18%, var(--color-paper));
  --dismiss-soft: color-mix(in srgb, var(--color-status-ochre) 18%, var(--color-paper));
  --memory-soft: color-mix(in srgb, var(--color-status-slate) 18%, var(--color-paper));
  --visa-soft: color-mix(in srgb, var(--color-status-teal) 18%, var(--color-paper));
  --brand-sky-soft: var(--intent-soft);
  --brand-gradient-soft: linear-gradient(
    135deg,
    var(--accent-primary-soft) 0%,
    color-mix(in srgb, var(--color-accent) 10%, var(--color-paper)) 100%
  );
}




/* ---- Part B: v2.1 semantic layer ---- */
:root{
  /* elevation: 3 quiet steps only */
  --elev-0:none;
  --elev-1:0 1px 0 rgba(14,58,105,.06),0 1px 2px rgba(14,58,105,.08);
  --elev-2:0 1px 2px rgba(14,58,105,.08),0 8px 24px -6px rgba(14,58,105,.12);
  --elev-3:0 2px 4px rgba(14,58,105,.08),0 16px 40px -12px rgba(14,58,105,.12);
  --rail-w:15rem; --rail-w-collapsed:4.25rem; --topbar-h:3.5rem; --measure:68ch;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.5rem;
  --tap:var(--control-height);           /* 44px */
  --list-w:24rem;
  --hair:1px solid var(--border-subtle);
  --btn-shadow:0 1px 0 rgba(14,58,105,.06),0 1px 2px rgba(14,58,105,.08); /* flat, crisp: replaces --shadow-button glow on this page */
  --btn-radius:var(--radius-input);       /* 12px: crisper than pill */
}

:root[data-theme="dark"] {
  --elev-1: 0 1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -6px rgba(0, 0, 0, 0.45);
  --elev-3: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 40px -12px rgba(0, 0, 0, 0.5);
  --btn-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.35);
}