/* ============================================================
   Fairs.com — Colors & Type
   Source: Fairs.com Website Revamp figma (Plus Jakarta Sans,
   red/black/beige palette, dark-first).
   ============================================================ */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-Italic.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand ---------- */
  --fairs-red:        #FF3636;   /* primary brand, used in logo + accents */
  --fairs-red-600:    #E62F2F;
  --fairs-red-700:    #BF2626;
  --fairs-red-50:     #FFF1F1;   /* red tint bg */
  --fairs-red-100:    #FFC5C5;   /* light tier in icon */

  /* ---------- Ink / neutrals (dark-first) ---------- */
  --ink-1000:         #0A0B0F;   /* deepest bg */
  --ink-950:          #0C0B0C;   /* footer / cta bg */
  --ink-900:          #100F10;   /* primary section bg (dark) */
  --ink-850:          #141111;   /* card/ fig 20,17,17 */
  --ink-800:          #1E2028;   /* alt dark bg (bluish near-black) */
  --ink-700:          #282A36;   /* raised surface */
  --ink-600:          #282729;   /* button base */
  --ink-500:          #323442;   /* light-on-dark divider warm */

  /* ---------- Slate (cool gray text) ---------- */
  --slate-500:        #6B6F8C;   /* body on light / secondary text */
  --slate-400:        #A7ACC1;   /* tertiary text on dark */
  --slate-300:        #CCD0DE;
  --slate-200:        #EDEEF3;   /* divider light */
  --slate-100:        #F9FAFC;

  /* ---------- Warm / beige (light surfaces) ---------- */
  --beige-50:         #FFFCF5;   /* warmest off-white */
  --beige-100:        #FDF9F0;   /* primary cream bg */
  --beige-200:        #F8F3E8;
  --beige-300:        #F1EADC;
  --beige-400:        #E6DED0;
  --beige-500:        #D8CEC0;
  --beige-600:        #B8AE9E;

  /* ---------- Semantic foreground / background ---------- */
  --fg:               var(--ink-850);       /* default text on light */
  --fg-muted:         var(--slate-500);
  --fg-inverse:       #FFFFFF;
  --fg-on-dark:       #FFFFFF;
  --fg-on-dark-muted: rgba(255,255,255,0.72);
  --fg-on-dark-faint: rgba(255,255,255,0.42);

  --bg:               #FFFFFF;
  --bg-cream:         var(--beige-100);
  --bg-dark:          var(--ink-900);
  --bg-deepest:       var(--ink-1000);

  --border:           var(--slate-200);     /* light border */
  --border-strong:    #D8CEC0;
  --border-on-dark:   rgba(255,255,255,0.20);
  --border-on-dark-subtle: rgba(255,255,255,0.10);

  /* ---------- Shadow system (warm, very subtle) ---------- */
  --shadow-xs: 0 1px 2px rgba(55,49,46,0.05), 0 1px 1px rgba(55,49,46,0.01);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.10), 0 6px 12px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 3px rgba(255,54,54,0.28);

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;          /* buttons */
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;         /* cards + hero */
  --r-2xl: 20px;        /* big hero cards */
  --r-pill: 999px;

  /* ---------- Spacing scale (8pt grid) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-28: 112px;

  /* ---------- Type foundations ---------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --lh-tight: 1.05;      /* display */
  --lh-snug: 1.2;        /* h1/h2 */
  --lh-heading: 1.3;     /* h3/h4 */
  --lh-body: 1.5;
  --ls-tight: -0.010em;  /* display + headings */
  --ls-tighter: -0.020em;

  /* ---------- Type scale (semantic) ---------- */
  --fs-hero:   72px;     /* display / hero headline */
  --fs-h1:     52px;     /* section heading, also CTA */
  --fs-h2:     44px;
  --fs-h3:     36px;     /* card heading */
  --fs-h4:     28px;
  --fs-h5:     22px;
  --fs-lead:   18px;     /* subheading / lead paragraph */
  --fs-body:   16px;     /* body */
  --fs-sm:     14px;
  --fs-xs:     12px;
}

/* ---------- Semantic element styles ---------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, .h-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: var(--lh-body);
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
p  { font-size: var(--fs-body); line-height: var(--lh-body); }

/* Tagline / eyebrow — small bold uppercase-ish label over section heads */
.tagline {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-body);
  color: currentColor;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fairs-red);
}

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

/* Utility: dark section scope */
.on-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.on-dark .lead { color: var(--fg-on-dark-muted); }
.on-cream { background: var(--bg-cream); color: var(--fg); }