/* ============================================================
   dreamborn.ai — Design Tokens
   Stack: Eleventy + Cloudflare Pages + Supabase + Claude API
   Built by Quinn (agent). Specced by Priya (BA), Zara (UX),
   architected by Vikram.
   ============================================================ */

/* ─── Bebas Neue (Brand headings) ─────────────────────────── */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/bebas-neue-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Lora (Brand body) ────────────────────────────────────── */
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ─── Fraunces (Editorial headings) ───────────────────────── */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ─── DM Sans (Editorial body + UI everywhere) ─────────────── */
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ─── Color Tokens ─────────────────────────────────────────── */
:root {
  /* Brand palette */
  --color-crimson:         #8B1A1A;
  --color-crimson-dark:    #6B1414;
  --color-stone:           #7A7060;
  --color-chain:           #9F7B4C;

  /* Surfaces */
  --color-bg:              #FFFFFF;
  --color-surface:         #F8F7F5;
  --color-surface-raised:  #FFFFFF;

  /* Text */
  --color-text-primary:    #1A1A1A;
  --color-text-secondary:  #4A4A4A;
  --color-text-muted:      #888888;
  --color-text-inverse:    #FFFFFF;

  /* Borders */
  --color-border:          #E5E2DC;
  --color-border-strong:   #C8C4BC;

  /* Status dots */
  --color-status-active:   #22C55E;
  --color-status-idle:     #F59E0B;
  --color-status-offline:  #9CA3AF;

  /* Accent */
  --color-accent:          var(--color-crimson);
  --color-accent-chain:    var(--color-chain);

  /* ─── Font Stacks ─────────────────────────────────────────── */
  --font-brand-heading:     'Bebas Neue', Impact, sans-serif;
  --font-brand-body:        'Lora', Georgia, serif;
  --font-editorial-heading: 'Fraunces', Georgia, serif;
  --font-body:              'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:              'JetBrains Mono', 'Fira Code', monospace;

  /* ─── 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;

  /* ─── Typography Scale ─────────────────────────────────────── */
  --text-h1:        clamp(48px, 8vw, 80px);
  --text-h2:        clamp(36px, 5vw, 56px);
  --text-h3:        clamp(24px, 3vw, 36px);
  --text-h4:        20px;
  --text-body-lg:   18px;
  --text-body:      16px;
  --text-body-sm:   14px;
  --text-label:     12px;
  --text-caption:   11px;

  /* ─── Layout ───────────────────────────────────────────────── */
  --container-max:  1200px;
  --content-max:    680px;
  --sidebar-max:    280px;

  /* ─── Borders & Radius ────────────────────────────────────── */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;

  /* ─── Transitions ──────────────────────────────────────────── */
  --transition-fast:   100ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ─── Nav ──────────────────────────────────────────────────── */
  --nav-height: 64px;
}

/* ─── Register Application ─────────────────────────────────── */

/* Brand register: Bebas Neue headings, Lora body */
[data-register="brand"] h1,
[data-register="brand"] h2,
[data-register="brand"] h3,
[data-register="brand"] h4 {
  font-family: var(--font-brand-heading);
  letter-spacing: 0.03em;
}

[data-register="brand"] p,
[data-register="brand"] .prose,
[data-register="brand"] .hero-subhead,
[data-register="brand"] .body-text {
  font-family: var(--font-brand-body);
}

/* Editorial register: Fraunces headings, DM Sans body */
[data-register="editorial"] h1,
[data-register="editorial"] h2,
[data-register="editorial"] h3,
[data-register="editorial"] h4 {
  font-family: var(--font-editorial-heading);
}

/* DM Sans is the base font — set on body */
body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Nav, buttons, labels, captions, metadata — always DM Sans */
nav,
button,
.btn,
label,
.caption,
.meta,
.status-label,
.agent-card,
.post-card .author,
.finn-chat {
  font-family: var(--font-body);
}