/* Empi landing page -- design tokens.
   Distilled from frontend/src/styles/tokens.css so the marketing site matches
   the product without importing it. OKLCH values, light + dark. Tokens only:
   every color in landing.css resolves through one of these. */

:root {
  /* Accent (crimson). Decomposed so glows/hovers can shift lightness only. */
  --accent-h: 25;
  --accent-c: 0.19;
  --accent-l: 0.47;
  --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-ink: oklch(0.95 0.02 var(--accent-h));
  --accent-soft: oklch(0.94 0.05 var(--accent-h));
  --accent-text: var(--accent);
  /* Fixed white ink for text/icons on a saturated fill (CTA, status pills). */
  --fg-on-fill: oklch(1 0 0);

  /* Semantic accents reused as small feature glyphs / chips. */
  --st-todo:    oklch(0.70 0.01 270);
  --st-doing:   oklch(0.72 0.13 235);
  --st-done:    oklch(0.72 0.13 155);
  --st-review:  oklch(0.75 0.13 290);
  --st-blocked: oklch(0.70 0.17 28);
  --p-urgent:   oklch(0.65 0.18 27);
  --p-high:     oklch(0.72 0.17 55);
  --p-normal:   oklch(0.72 0.10 230);
  --p-low:      oklch(0.65 0.01 270);
  --cal-meeting: oklch(0.62 0.13 285);
  --belt-deep:    oklch(0.28 0.01 270);
  --belt-shallow: oklch(0.99 0 0);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: var(--ease);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-emphasis: 320ms;

  /* Type. Geist is loaded via a <link> in index.html. */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Fluid display sizes (clamp for premium scaling without media queries). */
  --fs-display: clamp(2.6rem, 6.2vw, 4.7rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);

  --maxw: 1180px;
}

/* Dark theme (default product look: deep neutral) */
:root[data-theme="dark"] {
  --bg:        oklch(0.165 0.005 270);
  --bg-elev:   oklch(0.205 0.005 270);
  --bg-card:   oklch(0.225 0.006 270);
  --bg-hover:  oklch(0.255 0.006 270);
  --bg-active: oklch(0.29 0.008 270);
  --border:    oklch(0.29 0.006 270);
  --border-strong: oklch(0.37 0.008 270);
  --fg:        oklch(0.965 0.004 270);
  --fg-muted:  oklch(0.74 0.008 270);
  --fg-faint:  oklch(0.56 0.008 270);

  --shadow-1: 0 1px 0 0 oklch(0.30 0.006 270 / 0.6) inset, 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-pop: 0 18px 50px -12px oklch(0 0 0 / 0.6), 0 6px 18px -4px oklch(0 0 0 / 0.45);
  --shadow-card: 0 1px 0 0 oklch(0.32 0.006 270 / 0.5) inset, 0 14px 40px -18px oklch(0 0 0 / 0.6);

  /* On dark, brighten accent text for readability, keep chroma + hue. */
  --accent-text: oklch(max(var(--accent-l), 0.72) var(--accent-c) var(--accent-h));
  --cal-meeting: oklch(0.72 0.13 285);

  /* Glow layers behind the hero (the .auth-screen recipe). */
  --glow-a: oklch(from var(--accent) calc(l + 0.14) c h / 0.34);
  --glow-b: oklch(from var(--accent) calc(l + 0.02) c calc(h + 14) / 0.26);
  --glow-base: oklch(from var(--bg) calc(l + 0.05) c h);
  --grid-line: oklch(0.30 0.006 270 / 0.5);
  --hairline: oklch(1 0 0 / 0.06);
}

/* Light theme */
:root[data-theme="light"] {
  --bg:        oklch(0.985 0.003 90);
  --bg-elev:   oklch(1 0 0);
  --bg-card:   oklch(1 0 0);
  --bg-hover:  oklch(0.965 0.004 90);
  --bg-active: oklch(0.945 0.005 90);
  --border:    oklch(0.92 0.005 90);
  --border-strong: oklch(0.86 0.006 90);
  --fg:        oklch(0.20 0.008 270);
  --fg-muted:  oklch(0.46 0.008 270);
  --fg-faint:  oklch(0.60 0.008 270);

  --shadow-1: 0 1px 0 0 oklch(1 0 0 / 0.8) inset, 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-pop: 0 18px 50px -12px oklch(0.2 0.02 270 / 0.18), 0 6px 18px -4px oklch(0.2 0.02 270 / 0.08);
  --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.9) inset, 0 14px 38px -20px oklch(0.2 0.02 270 / 0.16);

  --p-high: oklch(0.64 0.17 55);
  --st-todo:  oklch(0.58 0.01 270);
  --st-doing: oklch(0.62 0.13 235);
  --st-done:  oklch(0.61 0.13 155);
  --st-review: oklch(0.64 0.13 290);
  --st-blocked: oklch(0.60 0.17 28);
  --cal-meeting: oklch(0.55 0.13 285);

  --glow-a: oklch(from var(--accent) calc(l + 0.22) c h / 0.20);
  --glow-b: oklch(from var(--accent) calc(l + 0.30) c calc(h + 14) / 0.16);
  --glow-base: oklch(from var(--bg) calc(l + 0.01) c h);
  --grid-line: oklch(0.20 0.02 270 / 0.06);
  --hairline: oklch(0.20 0.02 270 / 0.05);
}

/* Scalar API reference -- drive its theme from the Empi tokens.
   Scalar puts its mode class on <body> (body.dark-mode / body.light-mode) and
   its own light/dark toggle flips ONLY that class, not the html data-theme. So
   the Empi values are pinned literally per mode here (not via var(--bg), which
   is keyed to data-theme) -- otherwise toggling Scalar's switch would mix a
   light layout with dark surface vars. Scoping on body.<mode> also wins the
   cascade against Scalar's injected base theme. Values mirror the
   :root[data-theme=...] tokens above. */
body.light-mode,
body.dark-mode {
  --scalar-font: var(--font-sans);
  --scalar-font-code: var(--font-mono);
}

/* Hide Scalar's editor/MCP integration block (VS Code / Cursor / Generate MCP)
   from the sidebar -- not relevant to this reference. */
.scalar-mcp-layer {
  display: none !important;
}
body.dark-mode {
  --scalar-background-1: oklch(0.165 0.005 270);
  --scalar-background-2: oklch(0.205 0.005 270);
  --scalar-background-3: oklch(0.225 0.006 270);
  --scalar-background-accent: oklch(0.30 0.07 25);

  --scalar-color-1: oklch(0.965 0.004 270);
  --scalar-color-2: oklch(0.74 0.008 270);
  --scalar-color-3: oklch(0.56 0.008 270);
  --scalar-color-accent: oklch(0.47 0.19 25);

  --scalar-border-color: oklch(0.29 0.006 270);

  --scalar-sidebar-background-1: oklch(0.205 0.005 270);
  --scalar-sidebar-color-1: oklch(0.965 0.004 270);
  --scalar-sidebar-color-2: oklch(0.74 0.008 270);
  --scalar-sidebar-border-color: oklch(0.29 0.006 270);
  --scalar-sidebar-item-hover-background: oklch(0.255 0.006 270);
  --scalar-sidebar-item-active-background: oklch(0.29 0.008 270);
  --scalar-sidebar-color-active: oklch(0.47 0.19 25);
  --scalar-sidebar-search-background: oklch(0.225 0.006 270);
  --scalar-sidebar-search-border-color: oklch(0.29 0.006 270);
}
body.light-mode {
  --scalar-background-1: oklch(0.985 0.003 90);
  --scalar-background-2: oklch(1 0 0);
  --scalar-background-3: oklch(1 0 0);
  --scalar-background-accent: oklch(0.94 0.05 25);

  --scalar-color-1: oklch(0.20 0.008 270);
  --scalar-color-2: oklch(0.46 0.008 270);
  --scalar-color-3: oklch(0.60 0.008 270);
  --scalar-color-accent: oklch(0.47 0.19 25);

  --scalar-border-color: oklch(0.92 0.005 90);

  --scalar-sidebar-background-1: oklch(1 0 0);
  --scalar-sidebar-color-1: oklch(0.20 0.008 270);
  --scalar-sidebar-color-2: oklch(0.46 0.008 270);
  --scalar-sidebar-border-color: oklch(0.92 0.005 90);
  --scalar-sidebar-item-hover-background: oklch(0.965 0.004 90);
  --scalar-sidebar-item-active-background: oklch(0.945 0.005 90);
  --scalar-sidebar-color-active: oklch(0.47 0.19 25);
  --scalar-sidebar-search-background: oklch(1 0 0);
  --scalar-sidebar-search-border-color: oklch(0.92 0.005 90);
}