/* ============================================================
   RABBIT BRICKS — DESIGN TOKENS
   Blog Factory brand system. WCAG 2.1 AA compliant.
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */
  /* Primary — blueprint blue */
  --bf-blue:        #1E3A8A;
  --bf-blue-700:    #1C347A;
  --bf-blue-900:    #0F1E4D;
  --bf-blue-100:    #DCE3F4;
  --bf-blue-50:     #EEF2FB;

  /* Accent — discovery cyan */
  --bf-cyan:        #06B6D4;
  --bf-cyan-600:    #0891B2;   /* AA-safe on white for text/links */
  --bf-cyan-100:    #CFFAFE;
  --bf-cyan-50:     #ECFEFF;

  /* Neutrals */
  --bf-gray-50:     #F9FAFB;
  --bf-gray-100:    #F3F4F6;
  --bf-gray-200:    #E5E7EB;
  --bf-gray-300:    #D1D5DB;
  --bf-gray-400:    #9CA3AF;
  --bf-gray-500:    #6B7280;
  --bf-gray-600:    #4B5563;   /* body secondary */
  --bf-gray-700:    #374151;
  --bf-gray-800:    #1F2937;   /* body primary */
  --bf-gray-900:    #111827;

  /* Semantic */
  --bf-success:     #047857;   /* contrast 5.43 on white */
  --bf-success-bg:  #ECFDF5;
  --bf-warning:     #B45309;   /* contrast 4.78 on white */
  --bf-warning-bg:  #FFFBEB;
  --bf-error:       #B91C1C;   /* contrast 6.28 on white */
  --bf-error-bg:    #FEF2F2;

  /* Surface */
  --bf-bg:          #FFFFFF;
  --bf-bg-alt:      var(--bf-gray-50);
  --bf-bg-deep:     var(--bf-blue-900);
  --bf-border:      var(--bf-gray-200);
  --bf-border-strong: var(--bf-gray-300);

  /* Text */
  --bf-text:        var(--bf-gray-800);
  --bf-text-muted:  var(--bf-gray-600);
  --bf-text-subtle: var(--bf-gray-500);
  --bf-text-invert: #FFFFFF;
  --bf-text-link:   var(--bf-blue);

  /* ---------- TYPOGRAPHY ---------- */
  --bf-font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bf-font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bf-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale — modular, rem-based. 1rem = 16px */
  --bf-fs-caption:  0.75rem;   /* 12 */
  --bf-fs-small:    0.875rem;  /* 14 */
  --bf-fs-body:     1rem;      /* 16 */
  --bf-fs-lead:     1.125rem;  /* 18 */
  --bf-fs-h6:       1rem;      /* 16 */
  --bf-fs-h5:       1.125rem;  /* 18 */
  --bf-fs-h4:       1.375rem;  /* 22 */
  --bf-fs-h3:       1.75rem;   /* 28 */
  --bf-fs-h2:       2.25rem;   /* 36 */
  --bf-fs-h1:       3rem;      /* 48 */
  --bf-fs-display:  4.25rem;   /* 68 */

  --bf-lh-tight:    1.1;
  --bf-lh-snug:     1.25;
  --bf-lh-normal:   1.5;
  --bf-lh-loose:    1.7;

  --bf-fw-regular:  400;
  --bf-fw-medium:   500;
  --bf-fw-semibold: 600;
  --bf-fw-bold:     700;

  --bf-tracking-tight:   -0.02em;
  --bf-tracking-snug:    -0.01em;
  --bf-tracking-normal:  0;
  --bf-tracking-wide:    0.04em;
  --bf-tracking-caps:    0.08em;

  /* ---------- SPACING (4-8-12-16-24-32-48-64) ---------- */
  --bf-space-1:  4px;
  --bf-space-2:  8px;
  --bf-space-3:  12px;
  --bf-space-4:  16px;
  --bf-space-6:  24px;
  --bf-space-8:  32px;
  --bf-space-12: 48px;
  --bf-space-16: 64px;
  --bf-space-24: 96px;

  /* ---------- RADII ---------- */
  --bf-radius-sm:   4px;
  --bf-radius-md:   8px;
  --bf-radius-lg:   12px;
  --bf-radius-xl:   16px;
  --bf-radius-2xl:  24px;
  --bf-radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --bf-shadow-sm:  0 1px 2px rgba(15, 30, 77, 0.06);
  --bf-shadow-md:  0 4px 12px rgba(15, 30, 77, 0.08), 0 1px 2px rgba(15, 30, 77, 0.04);
  --bf-shadow-lg:  0 12px 32px rgba(15, 30, 77, 0.12), 0 2px 6px rgba(15, 30, 77, 0.06);
  --bf-shadow-xl:  0 24px 64px rgba(15, 30, 77, 0.18);
  --bf-ring:       0 0 0 3px rgba(6, 182, 212, 0.35);

  /* ---------- LAYOUT ---------- */
  --bf-container:        1200px;
  --bf-container-narrow: 760px;
  --bf-duration:         180ms;
  --bf-ease:             cubic-bezier(.2, .7, .2, 1);
}

/* ---------- BASE TYPE ---------- */
html { font-size: 16px; }

body {
  font-family: var(--bf-font-body);
  font-size: var(--bf-fs-body);
  line-height: var(--bf-lh-normal);
  color: var(--bf-text);
  background: var(--bf-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bf-font-display);
  font-weight: var(--bf-fw-semibold);
  letter-spacing: var(--bf-tracking-tight);
  line-height: var(--bf-lh-tight);
  color: var(--bf-gray-900);
  margin: 0;
}
h1 { font-size: var(--bf-fs-h1); }
h2 { font-size: var(--bf-fs-h2); }
h3 { font-size: var(--bf-fs-h3); letter-spacing: var(--bf-tracking-snug); }
h4 { font-size: var(--bf-fs-h4); letter-spacing: var(--bf-tracking-snug); line-height: var(--bf-lh-snug); }
h5 { font-size: var(--bf-fs-h5); line-height: var(--bf-lh-snug); }
h6 { font-size: var(--bf-fs-h6); line-height: var(--bf-lh-snug); text-transform: uppercase; letter-spacing: var(--bf-tracking-caps); color: var(--bf-text-muted); font-family: var(--bf-font-body); font-weight: var(--bf-fw-semibold); }

p  { margin: 0; }
.bf-lead    { font-size: var(--bf-fs-lead); line-height: var(--bf-lh-loose); color: var(--bf-text-muted); }
.bf-caption { font-size: var(--bf-fs-caption); color: var(--bf-text-muted); letter-spacing: var(--bf-tracking-wide); }
.bf-eyebrow { font-family: var(--bf-font-mono); font-size: var(--bf-fs-caption); letter-spacing: var(--bf-tracking-caps); text-transform: uppercase; color: var(--bf-cyan-600); }
.bf-mono    { font-family: var(--bf-font-mono); }

a { color: var(--bf-text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bf-cyan-600); }

::selection { background: var(--bf-cyan-100); color: var(--bf-blue-900); }