/* =========================================================
   FIRECHAT DESIGN SYSTEM — COLORS & TYPOGRAPHY
   Dark, molten, metal-industrial. Voice-first AI brand.
   ========================================================= */

/* Catamaran — brand sans, served locally from /fonts */
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Catamaran-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Catamaran-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Catamaran-Light.ttf') format('truetype'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Catamaran-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Catamaran-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Catamaran-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Catamaran-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Catamaran-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Catamaran-Black.ttf') format('truetype'); }

/* JetBrains Mono for code / API surfaces (used in docs + api pages) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND / ACCENTS ---------- */
  --fc-fire-orange: #ff5722;     /* primary accent — CTAs, active state, glow */
  --fc-molten-red: #d50000;      /* intense heat, danger, gradient end */
  --fc-ember-yellow: #ff9800;    /* secondary accent, hover for text links */
  --fc-ember-gold: #ffa726;      /* highlight accent */
  --fc-flame-yellow: #fed412;    /* logo yellow — used in logomark only */
  --fc-flame-orange: #e96700;    /* logo orange — used in logomark only */

  /* ---------- STRUCTURAL / NEUTRALS ---------- */
  --fc-steel-base: #0a0a0a;      /* page bg (darkest) */
  --fc-steel-dark: #1a1a1a;      /* panels, cards, elevated surfaces */
  --fc-metal-grey: #2a2a2a;      /* surface contrast, borders */
  --fc-ash-grey: #757575;        /* tertiary / disabled text */
  --fc-text-main: #f9fafb;       /* primary text */
  --fc-text-muted: #9ca3af;      /* muted secondary text */

  /* ---------- STATUS ---------- */
  --fc-success: #10b981;
  --fc-warning: #f59e0b;
  --fc-error:   #ef4444;
  --fc-info:    #3b82f6;

  /* ---------- GLASS / EFFECTS ---------- */
  --fc-glass-bg: rgba(25, 25, 25, 0.6);
  --fc-border-soft: rgba(255, 255, 255, 0.05);
  --fc-metal-border: rgba(42, 42, 42, 0.5);

  /* ---------- GRADIENTS ---------- */
  --fc-grad-molten: linear-gradient(135deg, #ff5722 0%, #d50000 100%);
  --fc-grad-ember:  linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
  --fc-grad-steel:  linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 100%);
  --fc-grad-page:   linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);

  /* ---------- SHADOWS / GLOW ---------- */
  --fc-shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --fc-shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --fc-shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --fc-glow-fire: 0 0 20px rgba(255,87,34,0.3), 0 0 40px rgba(255,87,34,0.1);
  --fc-glow-fire-strong: 0 0 30px rgba(255,87,34,0.5), 0 0 60px rgba(255,87,34,0.2);
  --fc-glow-ember: 0 0 15px rgba(255,152,0,0.4), 0 0 30px rgba(255,152,0,0.15);

  /* ---------- RADII ---------- */
  --fc-radius-xs: 0.25rem;   /* 4px  — inline, checkbox */
  --fc-radius-sm: 0.5rem;    /* 8px  — badges */
  --fc-radius-md: 0.75rem;   /* 12px — inputs, buttons */
  --fc-radius-lg: 1rem;      /* 16px — cards, modals */
  --fc-radius-xl: 1.5rem;    /* 24px — hero panels */
  --fc-radius-full: 999px;   /* pills, navbar, avatars */

  /* ---------- SPACING (4px base) ---------- */
  --fc-space-1: 4px;
  --fc-space-2: 8px;
  --fc-space-3: 12px;
  --fc-space-4: 16px;
  --fc-space-5: 24px;
  --fc-space-6: 32px;
  --fc-space-7: 48px;
  --fc-space-8: 64px;
  --fc-space-9: 96px;

  /* ---------- TYPOGRAPHY ---------- */
  --fc-font-sans: 'Catamaran', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fc-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (rem, base 16) — semantic */
  --fc-fs-display: 4.5rem;   /* 72 — hero */
  --fc-fs-h1: 3rem;          /* 48 */
  --fc-fs-h2: 2.25rem;       /* 36 */
  --fc-fs-h3: 1.5rem;        /* 24 */
  --fc-fs-h4: 1.25rem;       /* 20 */
  --fc-fs-body-lg: 1.125rem; /* 18 */
  --fc-fs-body: 1rem;        /* 16 */
  --fc-fs-body-sm: 0.875rem; /* 14 */
  --fc-fs-caption: 0.75rem;  /* 12 */

  /* Weights */
  --fc-fw-regular: 400;
  --fc-fw-medium: 500;
  --fc-fw-semibold: 600;
  --fc-fw-bold: 700;
  --fc-fw-black: 900;

  /* Line-heights */
  --fc-lh-tight: 1.05;   /* display */
  --fc-lh-snug: 1.2;     /* headings */
  --fc-lh-normal: 1.5;   /* body */
  --fc-lh-relaxed: 1.7;  /* long-form */

  /* Letter-spacing */
  --fc-ls-tight: -0.02em;
  --fc-ls-normal: 0;
  --fc-ls-wide: 0.08em;
  --fc-ls-caps: 0.14em;   /* ALL-CAPS eyebrow / uppercase */
}

/* =========================================================
   SEMANTIC TYPOGRAPHY
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
  background: var(--fc-grad-page);
  color: var(--fc-text-main);
  font-family: var(--fc-font-sans);
  font-size: var(--fc-fs-body);
  line-height: var(--fc-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fc-display {
  font-family: var(--fc-font-sans);
  font-size: var(--fc-fs-display);
  font-weight: var(--fc-fw-black);
  line-height: var(--fc-lh-tight);
  letter-spacing: var(--fc-ls-tight);
}

h1, .fc-h1 {
  font-size: var(--fc-fs-h1);
  font-weight: var(--fc-fw-black);
  line-height: var(--fc-lh-snug);
  letter-spacing: var(--fc-ls-tight);
  margin: 0;
}

h2, .fc-h2 {
  font-size: var(--fc-fs-h2);
  font-weight: var(--fc-fw-black);
  line-height: var(--fc-lh-snug);
  letter-spacing: var(--fc-ls-tight);
  margin: 0;
}

h3, .fc-h3 {
  font-size: var(--fc-fs-h3);
  font-weight: var(--fc-fw-bold);
  line-height: var(--fc-lh-snug);
  margin: 0;
}

h4, .fc-h4 {
  font-size: var(--fc-fs-h4);
  font-weight: var(--fc-fw-semibold);
  line-height: var(--fc-lh-snug);
  margin: 0;
}

.fc-body-lg { font-size: var(--fc-fs-body-lg); line-height: var(--fc-lh-relaxed); }
.fc-body    { font-size: var(--fc-fs-body);    line-height: var(--fc-lh-normal); }
.fc-body-sm { font-size: var(--fc-fs-body-sm); line-height: var(--fc-lh-normal); color: var(--fc-text-muted); }
.fc-caption { font-size: var(--fc-fs-caption); line-height: var(--fc-lh-normal); color: var(--fc-text-muted); }

/* Eyebrow — small, uppercase, wide-tracked, used above headings */
.fc-eyebrow {
  font-size: var(--fc-fs-caption);
  font-weight: var(--fc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--fc-ls-caps);
  color: var(--fc-fire-orange);
}

code, pre, .fc-mono {
  font-family: var(--fc-font-mono);
  font-size: 0.9em;
}

/* Gradient fire text — reserved for hero / key accent words */
.fc-text-fire {
  background: var(--fc-grad-molten);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Text glow — used sparingly on hero / marquee */
.fc-text-glow { text-shadow: 0 0 20px rgba(255, 87, 34, 0.5); }