/* ============================================================
   AUTOSCALE 2026 — Foundations
   Colors & Type tokens for the brand and event
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Sistema de display (decisão 03/06/2026):
   - GRANDES títulos / destaques  → GC Epic Pro  (var --font-display)
   - títulos MENORES (onde o "C" fecha) → Inter Tight ExtraBold (var --font-display-sm)
   NoaVoren fica disponível (testes), mas não é o display ativo. */
@font-face {
  font-family: "GC Epic Pro";
  src: url("./fonts/GCEpicPro.woff2") format("woff2"),
       url("./fonts/GCEpicPro.woff") format("woff"),
       url("./fonts/GCEpicPro.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NoaVoren";
  src: url("./fonts/NoaVoren-Regular.woff2") format("woff2"),
       url("./fonts/NoaVoren-Regular.woff") format("woff"),
       url("./fonts/NoaVoren-Regular.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
html { font-synthesis: none; -webkit-font-synthesis: none; }

/* Body / utility faces (Google Fonts). Inter Tight inclui o peso 800 (ExtraBold)
   usado nos títulos menores. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ============================================================
   COLOR TOKENS
   Palette source: Alex Cristache palette card (uploaded reference)
   Accessibility ratios on white quoted from source.
   ============================================================ */
:root {
  /* --- Raw palette --- */
  --as-popcorn:   #F4F3E9;  /* near-white paper, warm */
  --as-daisy:     #FAEC52;  /* signature yellow — high voltage */
  --as-aqua:      #16E9D7;  /* polar aqua — secondary pop */
  --as-sapphire:  #1845CD;  /* liquid sapphire — primary action blue */
  --as-persian:   #112691;  /* persian dream — deep brand blue */
  --as-cetacean:  #05092E;  /* cetacean blue — near-black ground */
  --as-ink:       #05092E;  /* alias of cetacean for body ink */
  --as-paper:     #F4F3E9;  /* alias of popcorn for paper bg */

  /* --- Tints & shades (computed via oklch from palette) --- */
  --as-sapphire-700: oklch(38% 0.21 264);
  --as-sapphire-300: oklch(70% 0.16 264);
  --as-persian-700:  oklch(28% 0.18 268);
  --as-aqua-200:     oklch(92% 0.10 190);
  --as-daisy-200:    oklch(96% 0.13 100);

  /* --- Semantic foreground --- */
  --fg-1: var(--as-cetacean);                /* primary text on paper */
  --fg-2: color-mix(in oklch, var(--as-cetacean) 70%, var(--as-paper));
  --fg-3: color-mix(in oklch, var(--as-cetacean) 45%, var(--as-paper));
  --fg-on-dark:  var(--as-popcorn);          /* primary text on dark */
  --fg-on-dark-2: color-mix(in oklch, var(--as-popcorn) 70%, var(--as-cetacean));
  --fg-on-blue:  var(--as-popcorn);

  /* --- Semantic background --- */
  --bg-paper:    var(--as-popcorn);
  --bg-ink:      var(--as-cetacean);
  --bg-deep:     var(--as-persian);
  --bg-action:   var(--as-sapphire);
  --bg-pop:      var(--as-daisy);
  --bg-cool:     var(--as-aqua);

  /* --- Lines & rules --- */
  --line-soft:   color-mix(in oklch, var(--as-cetacean) 12%, transparent);
  --line-strong: var(--as-cetacean);
  --line-on-dark: color-mix(in oklch, var(--as-popcorn) 18%, transparent);

  /* --- Focus / state --- */
  --focus-ring: var(--as-daisy);
  --hover-veil: color-mix(in oklch, var(--as-cetacean) 6%, transparent);
  --press-veil: color-mix(in oklch, var(--as-cetacean) 12%, transparent);

  /* ============================================================
     TYPE TOKENS
     ============================================================ */
  --font-display:    "GC Epic Pro", "Arial Black", system-ui, sans-serif;
  --font-display-sm: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Modular scale (1.250 minor third on body, looser on display) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;

  /* Line heights */
  --lh-tight:   0.92;   /* display */
  --lh-snug:    1.08;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-mono:    0.02em;
  --tr-eyebrow: 0.18em;

  /* ============================================================
     SPACING / RADII / SHADOW (foundation continued)
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 14px;
  --radius-pill: 999px;

  /* Shadows are SPARSE in the system — Autoscale leans flat-graphic.
     Use offset-block shadows (à la Memphis/swiss) instead of soft drop. */
  --shadow-block: 6px 6px 0 var(--as-cetacean);
  --shadow-block-blue: 6px 6px 0 var(--as-persian);
  --shadow-soft: 0 1px 2px rgba(5, 9, 46, 0.08), 0 8px 24px rgba(5, 9, 46, 0.06);
  --shadow-pop: 0 12px 40px -8px rgba(24, 69, 205, 0.35);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html, body {
  background: var(--bg-paper);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DISPLAY — NoaVoren is the brand voice (display). */
.display, h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

h1, .h1 {
  font-size: clamp(var(--fs-56), 7vw, var(--fs-128));
}

h2, .h2 {
  font-size: clamp(var(--fs-40), 4.5vw, var(--fs-72));
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  text-wrap: pretty;
  max-width: 64ch;
}

.lead {
  font-size: var(--fs-20);
  line-height: 1.5;
  font-weight: 500;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tr-mono);
}

.caption {
  font-size: var(--fs-12);
  color: var(--fg-3);
}

/* Underline treatment used in display headlines — short bold rule under a word */
.rule-under {
  background-image: linear-gradient(var(--as-daisy), var(--as-daisy));
  background-repeat: no-repeat;
  background-size: 100% 0.18em;
  background-position: 0 92%;
  padding: 0 0.05em;
}

/* Selection */
::selection {
  background: var(--as-daisy);
  color: var(--as-cetacean);
}