/* ==========================================================================
   IRID Creatives Corp — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..900&family=JetBrains+Mono:wght@400;500;700&display=swap');

@font-face {
  font-family: 'IRID Helvetica';
  src: url('./fonts/Helvetica.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Concrete grays (warm neutral, slightly green-leaning) -------------- */
  --concrete-0: #F4F2EE;   /* page bg, warm off-white */
  --concrete-1: #E6E3DD;   /* subtle panels */
  --concrete-2: #CFCBC3;   /* dividers, hairlines on light */
  --concrete-3: #8A867E;   /* captions, metadata */
  --concrete-4: #3A3834;   /* primary text */
  --concrete-5: #1A1917;   /* ink, dark surfaces */

  /* -- Accents (use one at a time, rarely) ------------------------------- */
  --chalk-yellow:  #EDD657;
  --chalk-lemon:   var(--chalk-yellow);
  --sand:          #CFC4B0;
  --pearl: radial-gradient(ellipse at 25% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 45%), linear-gradient(135deg, #FFFDF7 0%, #FFF4E8 20%, #FDE8EC 42%, #E8ECFA 62%, #F4EEDC 82%, #FFF8E4 100%);
  /* Legacy aliases */
  --cad-yellow:    var(--chalk-yellow);
  --warm-sand:     var(--sand);
  --clay:          var(--sand);
  --signal-red:    var(--sand);
  --signal-orange: var(--sand);
  --iridescent:    var(--pearl);

  /* -- Semantic foreground / background ---------------------------------- */
  --bg:      var(--concrete-0);
  --bg-alt:  var(--concrete-1);
  --bg-ink:  var(--concrete-5);
  --fg:      var(--concrete-4);
  --fg-mute: var(--concrete-3);
  --fg-loud: var(--concrete-5);
  --fg-inv:  var(--concrete-0);
  --rule:    var(--concrete-2);
  --accent:  var(--clay);

  /* -- Type families ----------------------------------------------------- */
  --font-display: 'Archivo', 'IRID Helvetica', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-serif:   'Archivo', 'IRID Helvetica', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-sans:    'IRID Helvetica', 'Helvetica Neue', Helvetica, 'Inter Tight', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'ABC Diatype Mono', ui-monospace, monospace;

  /* -- Type scale (size / line-height) ----------------------------------- */
  --t-mega-size: clamp(72px, 14vw, 220px);
  --t-mega-lh:   0.92;
  --t-h1-size:   clamp(48px, 6vw, 72px);
  --t-h1-lh:     0.98;
  --t-h2-size:   clamp(32px, 3.2vw, 40px);
  --t-h2-lh:     1.1;
  --t-h3-size:   24px;
  --t-h3-lh:     1.2;
  --t-body-size: 18px;
  --t-body-lh:   1.5;
  --t-small-size: 14px;
  --t-small-lh:   1.45;
  --t-label-size: 12px;
  --t-label-lh:   1;
  --t-index-size: 14px;
  --t-index-lh:   1;

  /* -- Spacing (8pt grid) ------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 160px;

  /* Section rhythm */
  --section-y: clamp(96px, 12vh, 160px);
  --gutter:    clamp(24px, 4vw, 64px);

  /* -- Radii (almost everything is square) ------------------------------- */
  --r-0:    0;
  --r-sm:   2px;
  --r-pill: 999px;

  /* -- Shadows (nearly none) --------------------------------------------- */
  --shadow-menu: 0 10px 40px -12px rgba(26, 25, 23, 0.25);

  /* -- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   240ms;
  --dur-reveal: 700ms;
}

/* ==========================================================================
   Semantic element styles — apply these to real tags.
   Scoped to .irid so you can opt in per surface.
   ========================================================================== */

.irid,
.irid * {
  box-sizing: border-box;
}

.irid {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.irid h1, .irid .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1-size);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--fg-loud);
  margin: 0;
}

.irid .mega {
  font-family: var(--font-display);
  font-size: var(--t-mega-size);
  line-height: 0.86;
  letter-spacing: -0.055em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--fg-loud);
  margin: 0;
}

.irid h2, .irid .h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--fg-loud);
  margin: 0;
}

.irid h3, .irid .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--fg-loud);
  margin: 0;
}

.irid p, .irid .body {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  margin: 0;
  text-wrap: pretty;
  max-width: 62ch;
}

.irid .small {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--fg-mute);
}

.irid .label,
.irid .kicker {
  font-family: var(--font-mono);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--fg-mute);
}

.irid .index {
  font-family: var(--font-mono);
  font-size: var(--t-index-size);
  line-height: var(--t-index-lh);
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.irid .mono {
  font-family: var(--font-mono);
  font-size: var(--t-small-size);
  font-variant-numeric: tabular-nums;
}

.irid code,
.irid .code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--concrete-1);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* -- Link style — underline swipes in from the left ---------------------- */
.irid a,
.irid .link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
  padding-bottom: 2px;
}
.irid a:hover,
.irid .link:hover {
  background-size: 100% 1px;
}

/* -- Rule / hairline ----------------------------------------------------- */
.irid hr,
.irid .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* -- Dot grid background (editorial insert pattern) --------------------- */
.irid .dot-grid {
  background-image: radial-gradient(var(--concrete-2) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0;
}

/* -- Grain overlay (add as pseudo-element on page root) ----------------- */
.irid .grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url('./assets/imagery/grain.svg');
  background-size: 240px 240px;
}