/* =============================================================
   SuperMarketers Design System — Core Tokens
   Use by: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- COLOR: Brand Core ---------- */
  --sm-yellow:        #DFFF05;   /* primary accent — the SuperMarketers yellow */
  --sm-yellow-deep:   #C9E800;   /* hover / pressed on yellow */
  --sm-yellow-soft:   #F0FFB0;   /* tinted yellow backgrounds, highlights */

  --sm-purple:        #6B4EFF;   /* accent 2 — digital/AI energy */
  --sm-purple-deep:   #4A33D9;
  --sm-purple-soft:   #E8E1FF;

  --sm-cream:         #F5EFE4;   /* warm off-white, primary alt background */
  --sm-cream-deep:    #EBE2D1;   /* subtle card tint on cream */

  /* ---------- COLOR: Neutrals ---------- */
  --sm-ink:           #0A0A0A;   /* body text, hero black */
  --sm-graphite:      #1A1A1A;
  --sm-slate:         #4A4A4A;   /* secondary text */
  --sm-fog:           #8A8A8A;   /* tertiary / captions */
  --sm-mist:          #C8C8C8;   /* hairlines, borders */
  --sm-bone:          #EDEDED;   /* subtle section dividers */
  --sm-paper:         #FAFAFA;   /* body background */
  --sm-white:         #FFFFFF;

  /* ---------- COLOR: Semantic (foreground / background) ---------- */
  --fg-1: var(--sm-ink);          /* primary text */
  --fg-2: var(--sm-slate);        /* secondary text */
  --fg-3: var(--sm-fog);           /* tertiary / labels */
  --fg-inv: var(--sm-white);      /* on dark */

  --bg-1: var(--sm-white);        /* default page */
  --bg-2: var(--sm-paper);        /* subtle contrast section */
  --bg-3: var(--sm-cream);        /* warm section */
  --bg-4: var(--sm-ink);          /* dark section */
  --bg-accent: var(--sm-yellow);

  --border-1: var(--sm-ink);      /* heavy punch border */
  --border-2: var(--sm-mist);     /* normal divider */
  --border-3: var(--sm-bone);     /* softest divider */

  /* ---------- COLOR: Semantic (status) ---------- */
  --status-success: #0E8A4A;
  --status-warn:    #E8A600;
  --status-error:   #D23A3A;
  --status-info:    var(--sm-purple);

  /* ---------- TYPOGRAPHY: Families ---------- */
  --font-display:  "Archivo Black", "Space Grotesk", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-display-alt: "Space Grotesk", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Inter", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-editorial:"Instrument Serif", "Times New Roman", Georgia, serif;

  /* ---------- TYPOGRAPHY: Scale ---------- */
  --fs-hero:       clamp(3.5rem, 9vw, 8.5rem);   /* 56 → 136px */
  --fs-display:    clamp(2.75rem, 6vw, 5.5rem);  /* 44 → 88 */
  --fs-h1:         clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2:         clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:         clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-h4:         1.125rem;
  --fs-lead:       clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body:       1rem;
  --fs-sm:         0.875rem;
  --fs-xs:         0.75rem;
  --fs-eyebrow:    0.75rem;

  --lh-tight:      1.02;
  --lh-display:    1.05;
  --lh-heading:    1.15;
  --lh-body:       1.6;
  --lh-relaxed:    1.75;

  --lsp-tight:    -0.035em;   /* big display */
  --lsp-snug:     -0.02em;
  --lsp-normal:   -0.005em;
  --lsp-wide:      0.08em;    /* eyebrows, labels */
  --lsp-xwide:     0.14em;

  /* ---------- SPACING ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* ---------- RADII ---------- */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 20px;
  --r-pill: 999px;

  /* ---------- SHADOW / ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-md: 0 4px 14px rgba(10,10,10,0.08);
  --shadow-lg: 0 16px 40px rgba(10,10,10,0.12);
  --shadow-punch: 6px 6px 0 var(--sm-ink);      /* signature hard shadow */
  --shadow-punch-lg: 10px 10px 0 var(--sm-ink);
  --shadow-punch-y: 6px 6px 0 var(--sm-yellow);
  --shadow-punch-p: 6px 6px 0 var(--sm-purple);

  /* ---------- BORDERS (signature) ---------- */
  --bw-hair: 1px;
  --bw-1: 1.5px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-punch: 2.5px;      /* brand border weight */

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.5, 0, 0.75, 0);
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-xslow: 900ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-text: 720px;
}

/* ============================================================
   BASE RESET + ELEMENT DEFAULTS (opt-in by wrapping in .sm-base)
   ============================================================ */

.sm-base, .sm-base * {
  box-sizing: border-box;
}
.sm-base {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use: <h1 class="sm-hero">, <p class="sm-lead">, etc.
   ============================================================ */

.sm-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
}
.sm-hero--glow {
  color: var(--sm-yellow);
  filter: drop-shadow(0 0 14px rgba(223,255,5,0.55)) drop-shadow(0 0 38px rgba(223,255,5,0.28));
}
.sm-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
}
.sm-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--lsp-snug);
  font-weight: 700;
  text-wrap: balance;
}
.sm-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--lsp-snug);
  font-weight: 600;
  text-wrap: balance;
}
.sm-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: var(--lsp-normal);
  font-weight: 600;
}
.sm-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--fg-2);
  text-wrap: pretty;
}
.sm-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}
.sm-body-lg {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.sm-small {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-2);
}
.sm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--lsp-xwide);
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}
.sm-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--lsp-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.sm-editorial {
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: 0;
}
.sm-editorial-italic {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
}
.sm-mono {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

/* Inline emphasis */
.sm-highlight {
  background: var(--sm-yellow);
  color: var(--sm-ink);
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sm-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--sm-yellow);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.sm-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
@media (min-width: 768px) {
  .sm-container { padding: 0 var(--sp-7); }
}

.sm-text-column {
  max-width: var(--container-text);
  margin: 0 auto;
}

.sm-section {
  padding: var(--sp-10) 0;
}
@media (max-width: 768px) {
  .sm-section { padding: var(--sp-9) 0; }
}

/* ============================================================
   DECORATION: hard rules (brand signature)
   ============================================================ */

.sm-rule-top    { border-top: var(--bw-punch) solid var(--sm-ink); }
.sm-rule-bottom { border-bottom: var(--bw-punch) solid var(--sm-ink); }
.sm-rule-hair   { border-top: 1px solid var(--border-2); }