/**
 * FlowCraft Design System — Tokens
 * ─────────────────────────────────────────────────────────────────────────────
 * Source: Claude Design output, corrected against confirmed staging site values.
 * Primary blue confirmed as #0082B6 (staging site tokens.css / Bricks Builder).
 * Dark theme — all background values are dark layered surfaces.
 * Font: Figtree (variable, weights 300–900). File: fonts/Figtree-VariableFont_wght.ttf
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* Brand font — Figtree loaded via Google Fonts in functions.php */

/* Mono — JetBrains Mono via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── COLOR TOKENS ───────────────────────────────────────────────────────── */
/* All --fc-* color tokens are aliased in tokens.css → --color-* tokens.
   tokens.css is the single source of truth. Do not define color values here. */
:root {
  /* Status colors — no --color-* equivalent, defined here only */
  --fc-success: #22C55E;
  --fc-warning: #F59E0B;
  --fc-error:   #EF4444;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────────────────── */
:root {
  /* Font families */
  --fc-font-sans:   'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fc-font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font sizes — fluid type scale */
  --fc-text-xs:     0.75rem;    /* 12px */
  --fc-text-sm:     0.875rem;   /* 14px */
  --fc-text-base:   1rem;       /* 16px */
  --fc-text-md:     1.125rem;   /* 18px */
  --fc-text-lg:     1.25rem;    /* 20px */
  --fc-text-xl:     1.5rem;     /* 24px */
  --fc-text-2xl:    1.875rem;   /* 30px */
  --fc-text-3xl:    2.25rem;    /* 36px */
  --fc-text-4xl:    3rem;       /* 48px */
  --fc-text-5xl:    3.75rem;    /* 60px */
  --fc-text-6xl:    4.5rem;     /* 72px */

  /* Font weights */
  --fc-weight-normal:  400;
  --fc-weight-medium:  500;
  --fc-weight-semibold:600;
  --fc-weight-bold:    700;
  --fc-weight-black:   800;

  /* Line heights */
  --fc-leading-tight:  1.15;
  --fc-leading-snug:   1.3;
  --fc-leading-normal: 1.5;
  --fc-leading-relaxed:1.7;

  /* Letter spacing */
  --fc-tracking-tight:  -0.03em;
  --fc-tracking-normal:  0em;
  --fc-tracking-wide:    0.04em;
  --fc-tracking-wider:   0.08em;
  --fc-tracking-caps:    0.1em;
}

/* ─── SEMANTIC TYPE STYLES ──────────────────────────────────────────────── */
:root {
  /* Heading stack */
  --fc-h1-size:    var(--fc-text-5xl);
  --fc-h1-weight:  var(--fc-weight-black);
  --fc-h1-leading: var(--fc-leading-tight);
  --fc-h1-tracking:var(--fc-tracking-tight);

  --fc-h2-size:    var(--fc-text-4xl);
  --fc-h2-weight:  var(--fc-weight-bold);
  --fc-h2-leading: var(--fc-leading-tight);
  --fc-h2-tracking:var(--fc-tracking-tight);

  --fc-h3-size:    var(--fc-text-2xl);
  --fc-h3-weight:  var(--fc-weight-bold);
  --fc-h3-leading: var(--fc-leading-snug);

  --fc-h4-size:    var(--fc-text-xl);
  --fc-h4-weight:  var(--fc-weight-semibold);
  --fc-h4-leading: var(--fc-leading-snug);

  /* Body */
  --fc-body-size:    var(--fc-text-md);
  --fc-body-weight:  var(--fc-weight-normal);
  --fc-body-leading: var(--fc-leading-relaxed);

  /* Small / caption */
  --fc-caption-size:    var(--fc-text-sm);
  --fc-caption-weight:  var(--fc-weight-medium);
  --fc-caption-leading: var(--fc-leading-normal);
  --fc-caption-tracking:var(--fc-tracking-wide);

  /* Eyebrow / label (ALL-CAPS category labels) */
  --fc-eyebrow-size:    var(--fc-text-xs);
  --fc-eyebrow-weight:  var(--fc-weight-semibold);
  --fc-eyebrow-tracking:var(--fc-tracking-caps);
}

/* ─── SPACING ────────────────────────────────────────────────────────────── */
:root {
  --fc-space-1:   0.25rem;   /* 4px */
  --fc-space-2:   0.5rem;    /* 8px */
  --fc-space-3:   0.75rem;   /* 12px */
  --fc-space-4:   1rem;      /* 16px */
  --fc-space-5:   1.25rem;   /* 20px */
  --fc-space-6:   1.5rem;    /* 24px */
  --fc-space-8:   2rem;      /* 32px */
  --fc-space-10:  2.5rem;    /* 40px */
  --fc-space-12:  3rem;      /* 48px */
  --fc-space-16:  4rem;      /* 64px */
  --fc-space-20:  5rem;      /* 80px */
  --fc-space-24:  6rem;      /* 96px */
  --fc-space-32:  8rem;      /* 128px */
}

/* ─── BORDER RADIUS ──────────────────────────────────────────────────────── */
:root {
  --fc-radius-sm:   4px;
  --fc-radius:      6px;
  --fc-radius-md:   8px;
  --fc-radius-lg:   12px;
  --fc-radius-xl:   16px;
  --fc-radius-full: 9999px;
}

/* ─── SHADOWS ────────────────────────────────────────────────────────────── */
:root {
  --fc-shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.3);
  --fc-shadow:       0 2px 12px rgba(0, 0, 0, 0.4);
  --fc-shadow-md:    0 4px 24px rgba(0, 0, 0, 0.5);
  --fc-shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.6);
  --fc-shadow-blue:  0 0 20px rgba(0, 130, 182, 0.25);   /* CTA glow */
  --fc-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── BORDERS ────────────────────────────────────────────────────────────── */
:root {
  --fc-border:       1px solid rgba(255,255,255,0.08);
  --fc-border-mid:   1px solid rgba(255,255,255,0.14);
  --fc-border-light: 1px solid rgba(255,255,255,0.04);
  --fc-border-blue:  1px solid rgba(0,130,182,0.4);
}

/* ─── TRANSITIONS ────────────────────────────────────────────────────────── */
:root {
  --fc-ease:        cubic-bezier(0.2, 0, 0.2, 1);
  --fc-duration-sm: 150ms;
  --fc-duration:    200ms;
  --fc-duration-md: 300ms;
}

/* ─── BASE ELEMENT STYLES ────────────────────────────────────────────────── */
.fc-root {
  font-family: var(--fc-font-sans);
  font-size:   var(--fc-text-base);
  line-height: var(--fc-leading-normal);
  color:       var(--fc-text);
  background:  var(--fc-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-h1 { font-size: var(--fc-h1-size); font-weight: var(--fc-h1-weight); line-height: var(--fc-h1-leading); letter-spacing: var(--fc-h1-tracking); }
.fc-h2 { font-size: var(--fc-h2-size); font-weight: var(--fc-h2-weight); line-height: var(--fc-h2-leading); letter-spacing: var(--fc-h2-tracking); }
.fc-h3 { font-size: var(--fc-h3-size); font-weight: var(--fc-h3-weight); line-height: var(--fc-h3-leading); }
.fc-h4 { font-size: var(--fc-h4-size); font-weight: var(--fc-h4-weight); line-height: var(--fc-h4-leading); }
.fc-body { font-size: var(--fc-body-size); font-weight: var(--fc-body-weight); line-height: var(--fc-body-leading); color: var(--fc-text-muted); }
.fc-eyebrow { font-size: var(--fc-eyebrow-size); font-weight: var(--fc-eyebrow-weight); letter-spacing: var(--fc-eyebrow-tracking); text-transform: uppercase; color: var(--fc-primary); }
.fc-mono { font-family: var(--fc-font-mono); font-size: var(--fc-text-sm); }

/* ─── UTILITY CLASSES ────────────────────────────────────────────────────── */
.fc-text-primary  { color: var(--fc-primary); }
.fc-text-muted    { color: var(--fc-text-muted); }
.fc-text-faint    { color: var(--fc-text-faint); }
.fc-bg-base       { background: var(--fc-base); }
.fc-bg-base-2     { background: var(--fc-base-2); }
.fc-bg-base-3     { background: var(--fc-base-3); }
.fc-border        { border: var(--fc-border); }
.fc-card          { background: var(--fc-base-2); border: var(--fc-border); border-radius: var(--fc-radius-lg); box-shadow: var(--fc-shadow); }