/* Peak DS — LTG PEAK design system. One file: tokens → brands → base → components.
   Extracted from hunchojrpeak, timbi-demo, c44, c4-dashboard, restaurant-orders (2026-10-25).
   Use: <link rel="stylesheet" href="peak.css"> then <html data-brand="night" data-theme="dark">.
   Per client: override only the brand block (accent + fonts). Never hard-code hex in pages. */

/* ---------- 1. Primitives (raw values, don't use in pages) ---------- */
:root {
  --warm-950: #0c0a09; --warm-900: #141010; --warm-850: #1c1616; --warm-800: #241c1c;
  --warm-700: #332627; --warm-600: #453436; --warm-400: #987d7e; --warm-300: #cbb0b1;
  --warm-100: #f5eceb; --warm-50: #fdfaf9;
  --navy-950: #070c24; --navy-900: #0f1737; --navy-800: #172255;
  --flame: #ff6a2b; --crackle: #ffb53d; --red: #e11d48; --red-hot: #ff4757;
  --neon: #4d7dff; --neon-hot: #9bb8ff; --cyan: #0ea5c9;
  --green: #22c55e; --amber: #eab308;
}

/* ---------- 2. Semantic tokens (dark is the default) ---------- */
:root {
  --bg: var(--warm-900);
  --surface: var(--warm-850);
  --surface-2: var(--warm-800);
  --ink: var(--warm-100);
  --ink-2: var(--warm-300);
  --ink-3: var(--warm-400);
  --line: color-mix(in oklab, var(--ink) 12%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 24%, transparent);

  --accent: var(--red-hot);
  --accent-2: var(--crackle);
  --on-accent: #1a0508; /* dark text: bright accents fail AA with white */
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);

  --good: var(--green); --warn: var(--amber); --bad: var(--red-hot);
  --good-soft: color-mix(in oklab, var(--good) 16%, transparent);
  --warn-soft: color-mix(in oklab, var(--warn) 16%, transparent);
  --bad-soft: color-mix(in oklab, var(--bad) 16%, transparent);

  /* Type: display = loud, body = readable, mono = numbers/data */
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-script: "Caveat", "Brush Script MT", cursive;

  /* Fluid type scale (mobile → desktop) */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-2xl: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);
  --t-3xl: clamp(2.75rem, 1.5rem + 6vw, 6.75rem);
  --t-hero: clamp(4rem, 2rem + 14vw, 13.75rem);

  /* Space: 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --section: clamp(var(--s-8), 10vw, var(--s-10));

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 28px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -10px rgb(0 0 0 / .55);
  --sh-2: 0 20px 50px -20px rgb(0 0 0 / .6);
  --sh-3: 0 40px 90px -20px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .08);
  --glow: 0 14px 40px -12px color-mix(in oklab, var(--accent) 75%, transparent);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.2, .8, .2, 1);
  --d-fast: 150ms; --d-base: 250ms; --d-slow: 500ms; --d-reveal: 900ms;

  --container: 1200px;
  --measure: 64ch;
  --gutter: clamp(16px, 4vw, 32px);
  /* Breakpoints (for @media, can't be vars): 640px phone, 900px tablet, 1200px desktop */

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #fff; --surface: var(--warm-50); --surface-2: #fff;
  --ink: #1a1113; --ink-2: #5c4548; --ink-3: #745f61; --on-accent: #fff;
  --accent: var(--red);
  --sh-1: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .18);
  --sh-2: 0 20px 50px -24px rgb(0 0 0 / .25);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #fff; --surface: var(--warm-50); --surface-2: #fff;
    --ink: #1a1113; --ink-2: #5c4548; --ink-3: #745f61; --on-accent: #fff;
    --accent: var(--red);
    color-scheme: light;
  }
}

/* ---------- 3. Brand presets (the only layer a client site changes) ---------- */
/* night: hospitality / nightlife — hunchojrpeak, timbi */
[data-brand="night"] {
  --bg: var(--navy-950); --surface: var(--navy-900); --surface-2: var(--navy-800);
  --ink: #f6f1e8; --ink-2: #a4aed6; --ink-3: #7c86b0;
  --accent: var(--flame); --accent-2: var(--crackle);
  --line: rgb(155 184 255 / .16);
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}
/* crimson: fitness / performance dashboards — c44, c4-dashboard */
[data-brand="crimson"] {
  --accent: var(--red-hot); --accent-2: var(--cyan);
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
}
/* ops: internal screens — kitchen, admin. Max legibility, no flourish. */
[data-brand="ops"] {
  --bg: var(--warm-950); --surface: #1c1917; --surface-2: #292524;
  --accent: #f97316;
  --font-display: var(--font-body);
}

/* ---------- 4. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-md)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); line-height: .95; letter-spacing: -.01em; margin: 0 0 var(--s-4); text-wrap: balance; }
h1 { font-size: var(--t-3xl); font-weight: 800; }
h2 { font-size: var(--t-2xl); font-weight: 700; }
h3 { font-size: var(--t-xl); font-weight: 700; line-height: 1.1; }
p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- 5. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* ---------- 6. Components ---------- */
.eyebrow { font: 600 var(--t-xs)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: var(--t-lg); color: var(--ink-2); }
.muted { color: var(--ink-3); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-pill);
  border: 1px solid transparent; font: 700 var(--t-md)/1 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), background var(--d-fast);
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-1); }
.card-glass { background: color-mix(in oklab, var(--surface) 60%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font: 600 var(--t-xs)/1.4 var(--font-mono); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.chip-good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.chip-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip-bad  { background: var(--bad-soft);  color: var(--bad);  border-color: transparent; }

.stat { display: grid; gap: var(--s-1); }
.stat-label { font: 600 var(--t-xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stat-value { font: 700 var(--t-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }

.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.input {
  min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong);
  font: inherit; font-size: max(16px, var(--t-md)); /* 16px stops iOS zoom */
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Sticky mobile CTA bar for booking/ordering */
.cta-bar { position: fixed; inset: auto 0 0; z-index: 50; display: flex; gap: var(--s-2); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.cta-bar .btn { flex: 1; }
@media (min-width: 900px) { .cta-bar { display: none; } }

/* ---------- 7. Motion ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--d-slow), transform var(--d-reveal) var(--ease-spring); }
.reveal.in { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .reveal { opacity: 1; transform: none; animation: peak-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
@keyframes peak-rise { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}