/* ============================================================
   1SNOB — CORE TOKENS
   Colors + Type foundations. Import this first, everywhere.
   ============================================================ */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('fonts/BodoniModa-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- RAINBOW — the brand signature ---------- */
  /* Saturated, slightly dirty, never Crayola. Modeled after risograph + fashion editorial. */
  --rainbow-red:     #EF3340;
  --rainbow-orange:  #FF7A1A;
  --rainbow-yellow:  #F5D400;
  --rainbow-green:   #2FA84F;
  --rainbow-blue:    #1E4FD6;
  --rainbow-indigo:  #5E2AB8;
  --rainbow-violet:  #D03FA8;

  /* Rainbow as a gradient — for big type, headers, fills */
  --rainbow: linear-gradient(
    90deg,
    var(--rainbow-red)    0%,
    var(--rainbow-orange) 16%,
    var(--rainbow-yellow) 33%,
    var(--rainbow-green)  50%,
    var(--rainbow-blue)   66%,
    var(--rainbow-indigo) 83%,
    var(--rainbow-violet) 100%
  );

  --rainbow-diagonal: linear-gradient(
    135deg,
    var(--rainbow-red)    0%,
    var(--rainbow-orange) 16%,
    var(--rainbow-yellow) 33%,
    var(--rainbow-green)  50%,
    var(--rainbow-blue)   66%,
    var(--rainbow-indigo) 83%,
    var(--rainbow-violet) 100%
  );

  /* ---------- NEUTRALS ---------- */
  --white:   #FFFFFF;
  --paper:   #FAFAF7;   /* warm off-white — default surface */
  --ink-1:   #0A0A0A;   /* primary text, near-black */
  --ink-2:   #2A2A2A;
  --ink-3:   #5A5A5A;
  --ink-4:   #9A9A9A;
  --rule:    #E6E6E2;   /* hairline */
  --tint:    #F0EFEA;   /* subtle fill */

  /* ---------- SEMANTIC ---------- */
  --fg-1: var(--ink-1);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-muted: var(--ink-4);
  --bg:    var(--paper);
  --bg-alt: var(--white);
  --border: var(--rule);
  --accent: var(--rainbow-red);     /* default pop */
  --link:   var(--ink-1);            /* links are underlined ink, not blue */

  --success: var(--rainbow-green);
  --warning: var(--rainbow-orange);
  --danger:  var(--rainbow-red);
  --info:    var(--rainbow-blue);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bodoni Moda', 'Didot', 'GFS Didot', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Display uses Bodoni Moda with high contrast + tight leading.
     Body uses Inter regular, relaxed leading. */
  --fs-hero:  clamp(4rem, 12vw, 11rem);   /* 64–176px */
  --fs-h1:    clamp(2.5rem, 6vw, 5rem);
  --fs-h2:    clamp(2rem, 4vw, 3rem);
  --fs-h3:    1.75rem;
  --fs-h4:    1.25rem;
  --fs-lede:  1.125rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight:   0.95;
  --lh-display: 1.02;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --tracking-display: 0.02em;
  --tracking-body:    0;
  --tracking-label:   0.12em;   /* ALL-CAPS micro labels */
  --tracking-wide:    0.25em;

  /* ---------- SPACING (4px base) ---------- */
  --s-0: 0;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ---------- RADII ---------- */
  /* 1snob prefers HARD corners. Radius is used sparingly, for pills/tags. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-pill: 999px;

  /* ---------- BORDERS ---------- */
  --stroke-hair:  1px;
  --stroke-rule:  1.5px;
  --stroke-bold:  2px;
  --stroke-heavy: 4px;

  /* ---------- SHADOWS ---------- */
  /* Shadows are rare. When used, they're tight and inky — never soft purple glows. */
  --shadow-sm: 0 1px 0 rgba(10,10,10,0.08);
  --shadow-md: 0 6px 14px -8px rgba(10,10,10,0.30);
  --shadow-lg: 0 18px 40px -20px rgba(10,10,10,0.35);
  --shadow-ink: 4px 4px 0 var(--ink-1);   /* offset block shadow — signature */

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.2);
  --ease-quick: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur:        220ms;
  --dur-slow:   480ms;
}

/* ============================================================
   ELEMENT DEFAULTS — "h1 is Bodoni Moda, p is Inter"
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h1, .h1 { font-size: var(--fs-h1); font-weight: 900; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 900; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 900; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 900; font-family: var(--font-body); letter-spacing: 0; }

.hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

p, li { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--s-4); }

.lede { font-size: var(--fs-lede); line-height: var(--lh-loose); color: var(--fg-2); }
.small { font-size: var(--fs-small); }
.micro {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 900;
  color: var(--fg-2);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--dur) var(--ease-out);
}
a:hover { opacity: 0.55; }

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

/* ---------- SIGNATURE UTILITIES ---------- */

/* Rainbow text fill — for hero "1snob" or key callouts */
.text-rainbow {
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Rainbow underline — smaller accents */
.rainbow-underline {
  background-image: var(--rainbow);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
}

/* Inline rainbow bar divider */
.rainbow-rule {
  height: 4px;
  background: var(--rainbow);
  border: 0;
  margin: var(--s-6) 0;
}