/* ============================================================
   Rebuilt Studio — Core Tokens
   Colors, type, spacing, radii. Import this first.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('./fonts/Fraunces-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Navy — primary brand */
  --navy-900: #0E1B2B;
  --navy-800: #162740;
  --navy-100: #D9E1EC;

  /* Cream / paper — surfaces */
  --cream-50:  #F7F2E8;
  --cream-100: #F1EADB;
  --paper-0:   #FDFBF5;

  /* Ink — type */
  --ink-900: #111111;
  --ink-700: #333333;
  --ink-500: #666666;
  --ink-300: #AAAAAA;

  /* Terracotta — accent */
  --terracotta-600: #C65D3A;
  --terracotta-100: #F3DDD2;

  /* Semantic */
  --success-600: #3A7A5C;
  --warning-600: #C99A3A;
  --danger-600:  #B04238;

  /* Semantic aliases */
  --bg-marketing:  var(--cream-50);
  --bg-card-mkt:   var(--cream-100);
  --bg-dashboard:  var(--paper-0);
  --bg-elevated:   #FFFFFF;
  --bg-reversed:   var(--navy-900);

  --fg-strong:     var(--navy-900);
  --fg-body:       var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-300);
  --fg-reversed:   var(--cream-50);

  --accent:        var(--terracotta-600);
  --accent-tint:   var(--terracotta-100);

  --border-default: var(--navy-100);
  --focus-ring:    var(--terracotta-600);

  /* Type families */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing — 4px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-2xl: 20px;

  /* Elevation — use sparingly (dashboard only) */
  --shadow-1dp: 0 1px 2px rgba(14, 27, 43, 0.06), 0 1px 1px rgba(14, 27, 43, 0.04);
  --shadow-popover: 0 8px 24px rgba(14, 27, 43, 0.12), 0 2px 4px rgba(14, 27, 43, 0.06);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med:  250ms;
  --dur-slow: 400ms;
}

/* ---------- Semantic type classes ---------- */
.display-xl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 4.5rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--fg-strong);
  font-variation-settings: "opsz" 48, "SOFT" 50;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--fg-strong);
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--fg-strong);
  font-variation-settings: "opsz" 24, "SOFT" 50;
}
.h3-ui {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--fg-strong);
}
.body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--fg-body);
}
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-body);
}
.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-body);
}
.micro {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--fg-body);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Base element styles ---------- */
html, body {
  background: var(--bg-marketing);
  color: var(--fg-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
p { max-width: 70ch; }

/* Focus ring — universal */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--terracotta-100);
  color: var(--navy-900);
}