/* =============================================================
   Firecrawl Design System - Foundation tokens
   Import once at the root: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================= */

/* Preconnect for fast font fetch */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ---------- COLOR ----------
     EVERY chromatic decision is a CSS variable. To rebrand for a sister app,
     override these in a child theme stylesheet - see /theme-variants/ for
     working examples. The `*-rgb` triplets are consumed by canvas-based web
     components (`<ascii-globe>`, `<orange-waves>`) which can't parse hex
     directly. Keep the two in sync when you override. */
  /* Surfaces - cream-white page, pure white cards */
  --fc-bg:            #FDFDFC;   /* page - cream-white (Kinetic) */
  --fc-bg-elev:       #FFFFFF;   /* cards, inputs - pure white */
  --fc-bg-soft:       #FDFDFC;   /* code panel - same as page, distinguished by border */
  --fc-bg-alt:        #F6F4ED;   /* occasional contrast surface */
  --fc-bg-deep:       #ECE7D6;   /* deepest bone - chips, tinted blocks */
  --fc-bg-tint:       #FFEFE6;   /* legacy orange tint - use sparingly */
  --fc-bg-banner:     #FF6A2C;   /* announcement bar */

  /* Ink */
  --fc-ink-1:         #1A1A1A;          /* primary */
  --fc-ink-1-rgb:     26, 26, 26;
  --fc-ink-2:         #6B6B6B;          /* secondary / body */
  --fc-ink-3:         #A3A3A3;          /* muted / placeholder / line nums */
  --fc-ink-3-rgb:     163, 163, 163;
  --fc-ink-4:         #D8D2C2;          /* very faint - denominator "06" - bone-ink */
  --fc-ink-4-rgb:     216, 210, 194;    /* canvas bone-glyph color */

  /* Brand orange - sampled from the Kinetic Marketing wordmark */
  --fc-orange:        #FF6A2C;
  --fc-orange-rgb:    255, 106, 44;     /* for canvas rgba() use */
  --fc-orange-hover:  #E55518;
  --fc-orange-press:  #C73F0A;
  --fc-orange-tint:   #FFEFE6;
  --fc-orange-ink:    #C73F0A;          /* for orange text on light bg */

  /* Brand-accent secondary (rarely used; reserved per sister app) */
  --fc-accent-2:      var(--fc-orange);
  --fc-accent-2-rgb:  var(--fc-orange-rgb);

  /* Lines - warm hairlines */
  --fc-line:          #E5E0D2;
  --fc-line-strong:   #D0CAB6;

  /* Semantic */
  --fc-success:       #1F8A5B;
  --fc-success-bg:    #E8F5EF;
  --fc-code-string:   #FF6A2C;   /* strings in code */
  --fc-code-keyword:  #8B5CF6;   /* `from`, `import` - violet, used very sparingly */
  --fc-code-default:  #1A1A1A;
  --fc-code-comment:  #A3A3A3;
  --fc-code-num:      #A3A3A3;

  /* ---------- TYPE ----------
     Change fonts in ONE place: --fc-font-display (titles) + --fc-font-body (copy/UI).
     --fc-font-sans stays as an alias of body. */
  --fc-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fc-font-display: var(--fc-font-body);
  --fc-font-sans:    var(--fc-font-body);
  --fc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes - used directly via the semantic vars below; raw if needed */
  --fc-size-display:   clamp(48px, 6.5vw, 96px);
  --fc-size-h1:        clamp(40px, 4.5vw, 64px);
  --fc-size-h2:        clamp(32px, 3.2vw, 44px);
  --fc-size-h3:        clamp(22px, 1.8vw, 28px);
  --fc-size-body-lg:   18px;
  --fc-size-body:      16px;
  --fc-size-body-sm:   14px;
  --fc-size-caption:   13px;
  --fc-size-overline:  12px;
  --fc-size-mono-sm:   13px;
  --fc-size-mono:      14px;

  /* Weights */
  --fc-w-regular: 400;
  --fc-w-medium:  500;
  --fc-w-semi:    600;
  --fc-w-bold:    700;
  --fc-w-black:   800;

  /* Leading */
  --fc-lh-tight:   1.05;
  --fc-lh-snug:    1.15;
  --fc-lh-normal:  1.45;
  --fc-lh-relaxed: 1.65;

  /* Tracking */
  --fc-tr-tight:   -0.02em;
  --fc-tr-normal:  0;
  --fc-tr-wide:    0.08em;
  --fc-tr-overline:0.18em;

  /* ---------- SPACING (8-grid) ---------- */
  --fc-s-1: 4px;
  --fc-s-2: 8px;
  --fc-s-3: 12px;
  --fc-s-4: 16px;
  --fc-s-5: 24px;
  --fc-s-6: 32px;
  --fc-s-7: 48px;
  --fc-s-8: 64px;
  --fc-s-9: 96px;
  --fc-s-10: 128px;
  --fc-s-11: 160px;

  /* ---------- RADII ---------- */
  --fc-r-1: 4px;
  --fc-r-2: 8px;
  --fc-r-3: 12px;
  --fc-r-4: 16px;
  --fc-r-pill: 999px;
  --fc-r-btn: 10px;
  --fc-r-btn-lg: 12px;
  --fc-r-card: 16px;
  --fc-r-input: 10px;
  --fc-hairline: 1px;

  /* ---------- SHADOWS ---------- */
  --fc-shadow-xs: 0 1px 2px rgba(20,20,20,0.04);
  --fc-shadow-sm: 0 2px 8px rgba(20,20,20,0.06);
  --fc-shadow-md: 0 4px 16px rgba(20,20,20,0.06), 0 2px 4px rgba(20,20,20,0.04);
  --fc-shadow-lg: 0 12px 32px rgba(20,20,20,0.08), 0 4px 8px rgba(20,20,20,0.04);

  /* ---------- MOTION ---------- */
  --fc-ease:     cubic-bezier(0.32, 0.72, 0, 1);
  --fc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fc-dur-fast: 150ms;
  --fc-dur-base: 250ms;
  --fc-dur-slow: 500ms;

  /* ---------- LAYOUT ---------- */
  --fc-container: 1280px;
  --fc-narrow:    880px;
  --fc-prose:     680px;
}

/* =============================================================
   SEMANTIC TYPE - drop these classes (or styles) onto elements
   ============================================================= */

html, body {
  background: var(--fc-bg);
  color: var(--fc-ink-1);
  font-family: var(--fc-font-sans);
  font-size: var(--fc-size-body);
  line-height: var(--fc-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fc-display {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-display);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-tight);
  letter-spacing: var(--fc-tr-tight);
  color: var(--fc-ink-1);
}

.fc-h1, h1 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h1);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-tight);
  letter-spacing: var(--fc-tr-tight);
  color: var(--fc-ink-1);
}

.fc-h2, h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h2);
  font-weight: var(--fc-w-bold);
  line-height: var(--fc-lh-snug);
  letter-spacing: var(--fc-tr-tight);
  color: var(--fc-ink-1);
}

.fc-h3, h3 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h3);
  font-weight: var(--fc-w-semi);
  line-height: var(--fc-lh-snug);
  letter-spacing: var(--fc-tr-tight);
  color: var(--fc-ink-1);
}

.fc-body, p {
  font-family: var(--fc-font-sans);
  font-size: var(--fc-size-body);
  font-weight: var(--fc-w-regular);
  line-height: var(--fc-lh-relaxed);
  color: var(--fc-ink-2);
}

.fc-body-lg {
  font-size: var(--fc-size-body-lg);
  line-height: var(--fc-lh-relaxed);
  color: var(--fc-ink-2);
}

.fc-caption {
  font-family: var(--fc-font-mono);
  font-size: var(--fc-size-caption);
  line-height: var(--fc-lh-normal);
  color: var(--fc-ink-3);
  letter-spacing: 0.02em;
}

.fc-overline {
  font-family: var(--fc-font-sans);
  font-size: var(--fc-size-overline);
  font-weight: var(--fc-w-semi);
  letter-spacing: var(--fc-tr-overline);
  text-transform: uppercase;
  color: var(--fc-ink-3);
}

.fc-mono, code, kbd, samp, pre {
  font-family: var(--fc-font-mono);
  font-size: var(--fc-size-mono);
  font-weight: var(--fc-w-regular);
  color: var(--fc-ink-1);
}

/* Signature: the [ 01 / 06 ] section counter */
.fc-counter {
  font-family: var(--fc-font-mono);
  font-size: var(--fc-size-mono);
  font-weight: var(--fc-w-medium);
  color: var(--fc-ink-3);
  letter-spacing: 0.04em;
}
.fc-counter .num   { color: var(--fc-orange); }
.fc-counter .total { color: var(--fc-ink-4); }
.fc-counter .label { color: var(--fc-ink-3); margin-left: var(--fc-s-4); letter-spacing: var(--fc-tr-overline); text-transform: uppercase; font-size: var(--fc-size-overline); }

/* Signature: the // category tag // */
.fc-cat {
  font-family: var(--fc-font-sans);
  font-size: var(--fc-size-body-sm);
  font-weight: var(--fc-w-medium);
  color: var(--fc-ink-2);
  display: inline-flex;
  align-items: center;
  gap: var(--fc-s-3);
}
.fc-cat::before, .fc-cat::after {
  content: "//";
  color: var(--fc-ink-4);
  font-family: var(--fc-font-mono);
}

/* Split-color headline: wrap the accent phrase in <span class="fc-accent"> */
.fc-accent { color: var(--fc-orange); }

/* Inline pill / chip wrapper for body - e.g. "It's also open source." */
.fc-pill-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-s-2);
  padding: 2px var(--fc-s-3);
  background: var(--fc-bg-elev);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r-pill);
  font-size: inherit;
  color: var(--fc-ink-1);
  box-shadow: var(--fc-shadow-xs);
}

/* Link */
a, .fc-link {
  color: var(--fc-orange-ink);
  text-decoration: none;
  transition: color var(--fc-dur-fast) var(--fc-ease);
}
a:hover, .fc-link:hover {
  color: var(--fc-orange-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Selection */
::selection { background: var(--fc-orange); color: #fff; }