/* Hertz Design System — Colors, Type, Spacing */
/* Load fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@1,9..144,300;1,9..144,400&display=swap');

:root {
  /* ============ COLOR ============ */
  /* Surfaces */
  --surface-white: #FFFFFF;
  --surface-light: #F5F5F5;
  --surface-stone: #F5F2EF;       /* warm signature surface */
  --surface-stone-hover: #EFEAE4;

  /* Ink / foreground */
  --ink-100: #000000;
  --ink-80:  #1A1A1A;
  --ink-60:  #525252;
  --ink-40:  #9A9A9A;
  --ink-20:  #CFCAC4;

  /* Hairlines */
  --hairline: #E8E6E2;
  --hairline-strong: #CFCAC4;

  /* Semantic */
  --accent-green: #1F6B4C;        /* operational, streaming */
  --accent-amber: #B8651A;        /* featured warm pill accent */
  --accent-red:   #B8321A;        /* errors (rarely used) */

  /* Semantic aliases */
  --bg:          var(--surface-white);
  --bg-alt:      var(--surface-stone);
  --fg1:         var(--ink-100);
  --fg2:         var(--ink-60);
  --fg3:         var(--ink-40);
  --border:      var(--hairline);
  --border-hover:var(--hairline-strong);

  /* ============ TYPE ============ */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-italic:  'Fraunces', 'Manrope', serif;  /* serif italic for accent phrases */

  /* Scale (px) */
  --fs-display-xxl: 128px;
  --fs-display-xl:  96px;
  --fs-display-lg:  72px;
  --fs-display-md:  56px;
  --fs-display-sm:  40px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-micro:   12px;
  --fs-mono:    13px;

  /* Line heights */
  --lh-display: 0.96;
  --lh-heading: 1.1;
  --lh-body:    1.55;
  --lh-tight:   1.3;

  /* Tracking */
  --track-display: -0.02em;
  --track-body:     0em;
  --track-upper:    0.16em;

  /* ============ SPACING ============ */
  --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: 128px;
  --s-11: 192px;

  /* ============ RADII ============ */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-pill: 999px;

  /* ============ SHADOWS (sparse) ============ */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
  --shadow-sticky: 0 1px 0 rgba(0,0,0,0.04);

  /* ============ MOTION ============ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast:  180ms;
  --dur:       320ms;
  --dur-slow:  560ms;

  /* Layout */
  --container: 1200px;
  --prose:     640px;

  /* ============ LANE B — ELEVENLABS-FLAT ============ */
  /* Per elevenlabs/examples DESIGN.md: neutral palette, flat, compact */
  --n-900: #171717;   /* text-neutral-900 — primary ink */
  --n-700: #404040;
  --n-500: #737373;   /* text-neutral-500 — secondary */
  --n-400: #a3a3a3;   /* text-neutral-400 — labels/status */
  --n-300: #d4d4d4;
  --n-200: #e5e5e5;   /* border-neutral-200 — all borders */
  --n-100: #f5f5f5;
  --n-50:  #fafafa;

  --flat-bg: #ffffff;
  --flat-fg: var(--n-900);
  --flat-fg-muted: var(--n-500);
  --flat-label: var(--n-400);
  --flat-border: var(--n-200);
  --flat-radius: 6px;          /* rounded-md */
  --flat-prose: 672px;         /* max-w-2xl */
}

/* ============ LANE B UTILITIES ============ */
.flat-page {
  background: var(--flat-bg);
  color: var(--flat-fg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
}
.flat-col {
  max-width: var(--flat-prose);
  margin: 0 auto;
  padding: 0 24px;
}
.flat-h1 {
  font: 500 24px/1.25 var(--font-body);
  color: var(--flat-fg);
  letter-spacing: -0.01em;
}
.flat-h2 {
  font: 500 18px/1.3 var(--font-body);
  color: var(--flat-fg);
}
.flat-body   { color: var(--flat-fg); font-size: 14px; }
.flat-muted  { color: var(--flat-fg-muted); font-size: 14px; }
.flat-label  { color: var(--flat-label); font-size: 12px; }
.flat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--flat-radius);
  font: 500 14px var(--font-body);
  cursor: pointer;
  border: 1px solid var(--flat-border);
  background: #fff;
  color: var(--flat-fg);
  transition: background 160ms, border-color 160ms;
}
.flat-btn:hover { background: var(--n-50); }
.flat-btn-primary {
  background: var(--n-900); color: #fff; border-color: var(--n-900);
}
.flat-btn-primary:hover { background: var(--n-700); border-color: var(--n-700); }
.flat-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius);
  font: 400 14px var(--font-body);
  color: var(--flat-fg);
  background: #fff;
  outline: none;
}
.flat-input:focus { border-color: var(--n-500); }
.flat-hr { border: none; border-top: 1px solid var(--flat-border); margin: 24px 0; }

/* ============ BASE ============ */
html, body {
  background: var(--bg);
  color: var(--ink-80);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
}

/* ============ SEMANTIC ELEMENTS ============ */
.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg1);
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg1);
}
.display-md {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg1);
}
.display-sm {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  color: var(--fg1);
}

/* Signature italic accent phrase */
.accent-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.015em;
}

h1 { font: 300 var(--fs-h1)/var(--lh-heading) var(--font-display); letter-spacing: var(--track-display); color: var(--fg1); }
h2 { font: 300 var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--track-display); color: var(--fg1); }
h3 { font: 500 var(--fs-h3)/var(--lh-heading) var(--font-body); color: var(--fg1); }
h4 { font: 500 var(--fs-h4)/var(--lh-heading) var(--font-body); color: var(--fg1); }

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--ink-80);
}

.eyebrow, .upper-cta {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-upper);
  text-transform: uppercase;
  color: var(--ink-60);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink-80);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
  border: 1px solid transparent;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--ink-100);
  color: var(--surface-white);
}
.btn-primary:hover { background: var(--ink-80); }

.btn-secondary {
  background: transparent;
  color: var(--ink-100);
  border-color: var(--ink-100);
}
.btn-secondary:hover { background: var(--surface-stone); }

.btn-featured {
  background: var(--surface-stone);
  color: var(--ink-100);
}
.btn-featured:hover { background: var(--surface-stone-hover); }

.btn-ghost {
  background: transparent;
  color: var(--ink-100);
  padding: 12px 12px;
}
.btn-ghost:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ CARDS ============ */
.card {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: border-color var(--dur) var(--ease-out);
}
.card:hover { border-color: var(--border-hover); }
.card-warm {
  background: var(--surface-stone);
  border-color: transparent;
}