/* ============================================================
   Autochrome — Core tokens
   Chrome-forward, dark-canvas-first. Molten orange accent.
   ============================================================ */

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

:root {
  /* ---------- Canvas / Neutrals (dark-first) ---------- */
  --ink-000: #000000;       /* deepest black */
  --ink-050: #0a0a0b;       /* canvas */
  --ink-100: #111113;       /* surface-1 */
  --ink-200: #17171a;       /* surface-2 / cards */
  --ink-300: #1f1f23;       /* surface-3 / raised */
  --ink-400: #2a2a2f;       /* hairline stronger */
  --ink-500: #3a3a40;       /* borders */
  --ink-600: #5a5a62;       /* muted fg */
  --ink-700: #8a8a92;       /* secondary fg */
  --ink-800: #c4c4ca;       /* primary fg on dark */
  --ink-900: #f2f2f4;       /* brightest fg on dark */
  --ink-white: #ffffff;

  /* ---------- Chrome (the signature) ---------- */
  --chrome-hi: #f6f7f9;     /* top highlight */
  --chrome-100: #e4e6ea;
  --chrome-200: #c8ccd2;
  --chrome-300: #a6aab2;
  --chrome-400: #7d8189;    /* core mid */
  --chrome-500: #565960;    /* deep mid */
  --chrome-600: #3a3c42;
  --chrome-shadow: #15161a; /* terminator */

  /* Reusable chrome presets — smooth ramps, no 50/50 terminators */
  --grad-chrome-brushed: linear-gradient(
    180deg,
    #f6f7f9 0%,
    #dfe2e7 22%,
    #b6bac2 48%,
    #7d8189 74%,
    #565960 100%
  );
  --grad-chrome-sweep: linear-gradient(
    90deg,
    #3a3c42 0%,
    #565960 14%,
    #b6bac2 38%,
    #f6f7f9 46%,
    #d8dbe0 56%,
    #8f939a 78%,
    #565960 100%
  );
  --grad-chrome-specular: radial-gradient(
    120% 90% at 32% 22%,
    #ffffff 0%,
    #e4e6ea 18%,
    #a6aab2 42%,
    #565960 72%,
    #1f1f23 100%
  );
  --grad-chrome-pill: linear-gradient(
    180deg,
    #f6f7f9 0%,
    #d8dbe0 28%,
    #a6aab2 58%,
    #7d8189 100%
  );
  --grad-chrome-anodized: linear-gradient(
    165deg,
    #e8eaee 0%,
    #b6bac2 35%,
    #7d8189 65%,
    #3a3c42 100%
  );
  /* Back-compat aliases */
  --grad-chrome-vertical: var(--grad-chrome-brushed);
  --grad-chrome-horizontal: var(--grad-chrome-sweep);
  --grad-chrome-radial: var(--grad-chrome-specular);

  /* ---------- Accent: Molten ---------- */
  --molten-050: #fff3ec;
  --molten-100: #ffd9c2;
  --molten-300: #ff8c55;
  --molten-500: #ff5a1f;    /* primary accent */
  --molten-600: #e24610;
  --molten-700: #b1350b;
  --molten-glow: rgba(255, 90, 31, 0.35);

  /* ---------- Semantic ---------- */
  --bg: var(--ink-050);
  --bg-elevated: var(--ink-200);
  --bg-raised: var(--ink-300);
  --fg: var(--ink-900);
  --fg-secondary: var(--ink-700);
  --fg-muted: var(--ink-600);
  --fg-inverse: var(--ink-050);
  --border: var(--ink-400);
  --border-strong: var(--ink-500);
  --accent: var(--molten-500);
  --accent-fg: #ffffff;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #ef4444;

  /* ---------- Typography ---------- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (fluid-ish, px-based for precision) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;
  --fs-128: 128px;

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.04em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.14em;

  /* ---------- Spacing ---------- */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadows / Glows ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) inset;
  --shadow-chrome-inset:
    inset 0 2px 2px rgba(255,255,255,0.55),
    inset 0 -6px 10px rgba(0,0,0,0.15),
    0 4px 10px rgba(0,0,0,0.55);
  --glow-accent: 0 0 0 1px rgba(255,90,31,0.3), 0 0 24px rgba(255,90,31,0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-slower: 800ms;

  /* ---------- Grain texture ---------- */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
}

.display-xl, h1.display {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-56);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
  margin: 0;
}

.body-lg { font-size: var(--fs-18); line-height: 1.55; }
.body-sm { font-size: var(--fs-14); line-height: 1.5; }

.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.serif {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-200);
  color: var(--ink-900);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--ink-400);
}

/* ============================================================
   Chrome text utility — the signature
   ============================================================ */
.chrome-text {
  /* Light-biased ramp — readable on dark canvas. Never goes below mid-grey. */
  background: linear-gradient(180deg,
    #ffffff 0%,
    #f2f4f7 24%,
    #d8dbe0 55%,
    #a6aab2 82%,
    #8f939a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5));
}

.chrome-surface {
  background: var(--grad-chrome-radial);
  box-shadow: var(--shadow-chrome-inset);
}