/* AutoClip Design Tokens — Issue 99 Phase A
 *
 * Linear-style command-interface dark + monospace data register.
 * Picked from an 8-option survey on 2026-05-31 (see docs/DECISIONS.md
 * "2026-05-31 — Issue 99 design direction" for full rationale).
 *
 * Filename starts with underscore by convention — communicates "shared
 * partial, not a page stylesheet." Loaded before any page-specific style
 * block via <link rel="stylesheet" href="/static/_design-tokens.css">.
 *
 * Rollout phases:
 *   - Phase A (this file + pricing.html retrofit): land the tokens, prove
 *     the system on the smallest currently-most-broken page.
 *   - Phase B (next): retrofit index / onboarding / insights / profile /
 *     review / tos / privacy / early-access. One commit per template.
 *   - Phase C: apply `.mono` data register to clip metadata, transcript
 *     timestamps, video table durations, DNA stat cards.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Surfaces (lightness ladder, no shadows) ───────────────────── */
  --color-bg:        #0a0a0a;  /* page background */
  --color-surface:   #111111;  /* cards, panels */
  --color-elevated:  #1a1a1a;  /* hover lift, popovers */
  --color-raised:    #1f1f1f;  /* hairline borders that read as dividers */

  /* ── Borders ──────────────────────────────────────────────────── */
  --color-border:        #1f1f1f;  /* default hairline */
  --color-border-strong: #2a2a2a;  /* loud separators */

  /* ── Text ─────────────────────────────────────────────────────── */
  --color-text:        #ededed;  /* primary */
  --color-text-muted:  #888888;  /* secondary, labels */
  --color-text-subtle: #666666;  /* tertiary, meta */

  /* ── Accent (indigo — purple family, restrained, not "AI-tool") ── */
  --color-accent:        #5e6ad2;
  --color-accent-hover:  #6b7ae8;
  --color-accent-soft:   rgba(94, 106, 210, 0.12);  /* hover bg, focus ring tint */

  /* ── Semantic status (used sparingly — borrowed from GitHub Primer) ── */
  --color-success: #2ecc71;
  --color-warning: #f39c12;
  --color-danger:  #e74c3c;

  /* ── Typography ───────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', monospace;

  /* Type scale — modest, content-driven, NOT marketing-heroic. */
  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 0.9rem;
  --text-md:   1rem;
  --text-lg:   1.2rem;
  --text-xl:   1.6rem;
  --text-2xl:  2rem;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ── Spacing (4px base) ───────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Row height standard — Linear hits 32px on tables/lists. */
  --row-height: 32px;

  /* ── Radii ────────────────────────────────────────────────────
   * Sharp ladder (Linear-locked, Issue 99) for data-dense surfaces:
   * dashboard tables, insights grid, profile cards. Soft ladder
   * (Issue 136 redirect, 2026-06-07) for marketing + editor
   * surfaces where "futuristic" beats "utility" — see DECISIONS. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius:      4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* ── Glow + aurora (Issue 136 redirect) ──────────────────────── */
  --glow-accent:        0 0 0 1px rgba(94, 106, 210, 0.4), 0 12px 48px -8px rgba(94, 106, 210, 0.45);
  --glow-accent-soft:   0 0 0 1px rgba(94, 106, 210, 0.25);
  --glow-focus-ring:    0 0 0 4px rgba(94, 106, 210, 0.22);
  --gradient-aurora:    radial-gradient(60% 80% at 50% 0%,
                            rgba(94, 106, 210, 0.18) 0%,
                            rgba(94, 106, 210, 0.06) 35%,
                            transparent 70%);
  --gradient-text:      linear-gradient(180deg, #ffffff 0%, #b9bdde 100%);

  /* ── Motion (snappy; 80-120ms range) ──────────────────────────── */
  --duration-fast:   80ms;
  --duration:        120ms;
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Editor-mode surfaces (Issue 136 dark editor) ──────────────────
   * review.html is a focused editor surface, not a content page. It
   * borrows the same indigo accent but uses dedicated surface tokens
   * that read slightly elevated against the page background — matches
   * the CapCut Web / Opus Pro three-pane feel without overriding the
   * Linear surface ladder used on every other page. Issue spec calls
   * out #0a0a0a / #141414 / #5e6ad2 explicitly — locked here.
   * ───────────────────────────────────────────────────────────────── */
  --editor-bg:           #0b0c12;   /* page — subtle indigo tint, warmer than pure black */
  --editor-surface:      #14161f;   /* player + transcript + drawer panels (warmer #141414) */
  --editor-surface-elev: #1c1f2c;   /* hover, active drawer panel */
  --editor-border:       #23263a;   /* panel hairlines — cool tone for "futuristic" feel */
  --editor-border-strong:#2e3247;   /* tool-strip separators */
  --editor-icon-strip:   #0d0e16;   /* right-rail strip — slightly inset */
  --editor-drawer-width: 26rem;     /* slide-out tool drawer width */
  --editor-strip-width:  8.5rem;    /* tool-rail column width — wide enough for icon + label */
  /* Editor panel radius — softer than the dashboard's 4px lock. */
  --editor-radius:       var(--radius-lg);
}

/* ─────────────────────────────────────────────────────────────────
 * Reset (minimal — just enough to make things deterministic).
 * ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  /* Inter looks best with these — Linear/Vercel both opt in. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter's stylistic sets */
}

body { min-height: 100vh; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--color-accent); }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { color: var(--color-text); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--duration-fast) var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

/* ─────────────────────────────────────────────────────────────────
 * Component layer (minimal — page-specific styles live in <style> blocks
 * and use these tokens, this file does NOT try to be a UI kit).
 * ───────────────────────────────────────────────────────────────── */

/* Nav ----------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.nav-brand {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-accent);
  letter-spacing: -0.02em;
}
.nav-brand:hover { color: var(--color-accent-hover); }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
}
.nav-links a { color: var(--color-text-muted); }
.nav-links a:hover,
.nav-links a.active { color: var(--color-text); }
.nav-spacer { margin-left: auto; }

/* Minute balance chip (Issues 113) */
.nav-balance {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px var(--space-2);
  white-space: nowrap;
}

/* Tutorial help icon (Issue 113) */
.nav-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1;
}
.nav-help:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Card ---------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.btn-primary {
  background: var(--color-accent);
  color: #ffffff;
}
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-secondary:hover {
  background: var(--color-elevated);
  border-color: var(--color-accent);
}
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover {
  background: var(--color-elevated);
  color: var(--color-text);
}

/* Mono data register (Phase C target — utility class lands now so
 * page-level styles can opt in incrementally). */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';  /* tabular numerals so columns align */
}

/* Keyboard chips ------------------------------------------------ */
.kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  line-height: 1;
}

/* Badges (status pills) ----------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.badge-success { color: var(--color-success); border-color: rgba(46, 204, 113, 0.4); }
.badge-warning { color: var(--color-warning); border-color: rgba(243, 156, 18, 0.4); }
.badge-danger  { color: var(--color-danger);  border-color: rgba(231, 76, 60, 0.4); }
.badge-accent  { color: var(--color-accent);  border-color: rgba(94, 106, 210, 0.4); }

/* Disclaimer / honesty band (used on every page — required by
 * CLAUDE.md honesty constraint) */
.disclaimer {
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Footer (Wave 6 legal links) ---------------------------------- */
.footer {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  margin-top: var(--space-12);
}
.footer a {
  color: var(--color-text-muted);
  margin: 0 var(--space-2);
}
.footer a:hover { color: var(--color-text); }