/* ============================================================
   VERAD — Colors & Type Foundations
   ============================================================
   Verad (formerly Ponta) is "Verification Media" — a network
   that turns CAPTCHA verification moments into branded ad
   surfaces. The brand positions verified human attention as
   the new luxury good of the digital economy.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "Quilichao Grotesk"; font-style: normal; font-weight: 300; src: url("./fonts/QuilichaoGrotesk-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Quilichao Grotesk"; font-style: normal; font-weight: 400; src: url("./fonts/QuilichaoGrotesk-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Quilichao Grotesk"; font-style: italic; font-weight: 400; src: url("./fonts/QuilichaoGrotesk-RegularIt.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Quilichao Grotesk"; font-style: normal; font-weight: 500; src: url("./fonts/QuilichaoGrotesk-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Quilichao Grotesk"; font-style: normal; font-weight: 600; src: url("./fonts/QuilichaoGrotesk-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Quilichao Grotesk"; font-style: normal; font-weight: 700; src: url("./fonts/QuilichaoGrotesk-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Quilichao Grotesk"; font-style: normal; font-weight: 900; src: url("./fonts/QuilichaoGrotesk-Black.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300; src: url("./fonts/SpaceGrotesk-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; src: url("./fonts/SpaceGrotesk-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; src: url("./fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; src: url("./fonts/SpaceGrotesk-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; src: url("./fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-display: swap; }

:root {
  /* ============================================================
     COLOR — primitive palette
     Drawn from skin tones, warm light, soft shadow. The brand
     refers to these as HUMAN / LUXURY / TANGIBLE palettes.
     ============================================================ */

  /* Skin / Luxury — the signature warm metallic gradient */
  --skin-50:  #FFE6D7;   /* peach highlight, used as button surface */
  --skin-100: #F5E1D2;
  --skin-200: #E9E4DF;   /* bone / paper */
  --skin-300: #E2D6CE;
  --skin-400: #CBBEB1;   /* neutral skin */
  --skin-500: #C5B9AB;   /* mid skin */
  --skin-600: #C29370;   /* signature copper / luxury accent */
  --skin-700: #C79876;   /* warm copper variant */
  --skin-800: #906954;   /* deep skin shadow */
  --skin-900: #796458;   /* deepest skin */

  /* Neutrals — paper to ink */
  --paper:    #FFFFFF;
  --bone:     #E9E4DF;
  --mist:     #E2E2E2;
  --ash:      #D9D9D9;
  --silver:   #C0C0C0;
  --steel:    #999795;
  --slate:    #6D6B6A;
  --charcoal: #444444;
  --carbon:   #3A3B37;   /* dark mode surface */
  --ink:      #181512;   /* deepest warm black */
  --jet:      #181818;
  --void:     #000000;

  /* Verification semantic */
  --verify:   #11FF44;   /* "verified human" pass green — only for confirmation */
  --alert:    #E61D2B;   /* error / bot detected red */
  --signal:   #011582;   /* deep network blue, accent only */

  /* ============================================================
     SEMANTIC TOKENS — Light (default) mode
     ============================================================ */
  --bg:        var(--paper);
  --bg-2:      var(--bone);
  --bg-3:      var(--skin-200);
  --bg-inv:    var(--ink);

  --fg:        var(--ink);
  --fg-2:      var(--charcoal);
  --fg-3:      var(--slate);
  --fg-mute:   var(--steel);
  --fg-inv:    var(--paper);

  --line:      var(--ink);
  --line-soft: rgba(24, 21, 18, 0.12);
  --line-mute: rgba(24, 21, 18, 0.06);

  --accent:    var(--skin-600);  /* copper */
  --accent-2:  var(--skin-800);
  --accent-soft: var(--skin-50);

  /* The signature luxury gradient — warm metallic */
  --grad-luxury:  linear-gradient(180deg, #796458 0%, #C29370 64%, #CCC1B6 96%);
  --grad-luxury-h:linear-gradient(90deg, #796458 0%, #C29370 50%, #E2D6CE 100%);
  --grad-skin:    linear-gradient(180deg, #D9D9D9 0%, #C29370 100%);
  --grad-paper:   linear-gradient(180deg, #FFFFFF 0%, #E9E4DF 100%);
  --grad-ink:     linear-gradient(180deg, #3A3B37 0%, #181512 100%);

  /* ============================================================
     TYPE — base
     ============================================================ */
  --font-display: "Quilichao Grotesk", "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
  --font-sans:    "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "Space Grotesk", "JetBrains Mono", ui-monospace, monospace;

  /* Display (Quilichao) — used for hero statements, big numerals,
     editorial moments. Light or Bold. -2% letter-spacing. */
  --display-1-size: clamp(72px, 12vw, 240px);
  --display-1-line: 0.92;
  --display-1-weight: 300;          /* Light is the editorial default */
  --display-1-track: -0.03em;

  --display-2-size: clamp(56px, 8vw, 140px);
  --display-2-line: 0.95;
  --display-2-weight: 400;
  --display-2-track: -0.025em;

  --display-3-size: clamp(40px, 5vw, 80px);
  --display-3-line: 1.0;
  --display-3-weight: 600;
  --display-3-track: -0.02em;

  /* Headings (Space Grotesk Bold) — page titles, section labels */
  --h1-size: 64px;  --h1-line: 1.04; --h1-weight: 700; --h1-track: -0.02em;
  --h2-size: 40px;  --h2-line: 1.1;  --h2-weight: 700; --h2-track: -0.02em;
  --h3-size: 26px;  --h3-line: 1.2;  --h3-weight: 700; --h3-track: -0.02em;
  --h4-size: 20px;  --h4-line: 1.3;  --h4-weight: 600; --h4-track: -0.01em;
  --h5-size: 16px;  --h5-line: 1.3;  --h5-weight: 600; --h5-track:  0.00em;

  /* Body */
  --body-size:   16px; --body-line: 1.55; --body-weight: 400;
  --body-lg-size:18px; --body-lg-line:1.55;
  --body-sm-size:14px; --body-sm-line: 1.5;

  /* Eyebrows / labels — uppercase, tracked out, the brand's
     ALL-CAPS micro-label voice (e.g. "VERIFIED HUMAN PROTOCOL 4.2") */
  --label-size:  12px;
  --label-line:  1.0;
  --label-weight:700;
  --label-track: 0.10em;
  --label-case:  uppercase;

  --caption-size: 11px;
  --caption-line: 1.3;
  --caption-track: 0.04em;

  /* Mono / data — telemetry readouts */
  --mono-size: 12px;
  --mono-track: 0.02em;

  /* ============================================================
     SPACING — 4px grid
     ============================================================ */
  --s-0: 0;
  --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-24: 96px;
  --s-32: 128px;

  /* ============================================================
     RADII
     The system uses two distinct radius languages:
     • Sharp — squared edges for buttons, eyebrows, data chips
     • Soft — large, generous radii for cards & surfaces (≈ 32px)
     ============================================================ */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-card: 32px;
  --r-pill: 9999px;

  /* ============================================================
     SHADOWS — warm copper-tinted, low-spread
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(24,21,18,0.06);
  --shadow-sm: 0 2px 6px rgba(121,100,88,0.08);
  --shadow-md: 1.6px 4px 9px -2.8px rgba(121,100,88,0.45);
  --shadow-lg: 0 16px 40px -8px rgba(121,100,88,0.30);
  --shadow-luxury: 1.6px 4px 9px -2.8px rgba(121,100,88,0.55), 0 1px 0 0 rgba(255,255,255,0.6) inset;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --bg:        var(--carbon);
  --bg-2:      #2A2B27;
  --bg-3:      var(--ink);
  --bg-inv:    var(--paper);

  --fg:        var(--paper);
  --fg-2:      var(--bone);
  --fg-3:      var(--skin-300);
  --fg-mute:   var(--steel);
  --fg-inv:    var(--ink);

  --line:      var(--paper);
  --line-soft: rgba(255,255,255,0.14);
  --line-mute: rgba(255,255,255,0.06);
}

/* ---------- Luxury theme — warm copper editorial ---------- */
[data-theme="luxury"] {
  --bg:        var(--skin-50);
  --bg-2:      var(--skin-200);
  --bg-3:      var(--skin-300);
  --fg:        var(--ink);
  --fg-2:      var(--skin-800);
  --fg-3:      var(--skin-900);
  --accent:    var(--skin-800);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.display-1 { font-family: var(--font-display); font-weight: var(--display-1-weight); font-size: var(--display-1-size); line-height: var(--display-1-line); letter-spacing: var(--display-1-track); }
.display-2 { font-family: var(--font-display); font-weight: var(--display-2-weight); font-size: var(--display-2-size); line-height: var(--display-2-line); letter-spacing: var(--display-2-track); }
.display-3 { font-family: var(--font-display); font-weight: var(--display-3-weight); font-size: var(--display-3-size); line-height: var(--display-3-line); letter-spacing: var(--display-3-track); }

h1, .h1 { font-family: var(--font-sans); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-line); letter-spacing: var(--h1-track); margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-track); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-weight: var(--h3-weight); font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-track); margin: 0; }
h4, .h4 { font-family: var(--font-sans); font-weight: var(--h4-weight); font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-track); margin: 0; }
h5, .h5 { font-family: var(--font-sans); font-weight: var(--h5-weight); font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-track); margin: 0; }

p, .body { font-family: var(--font-sans); font-weight: var(--body-weight); font-size: var(--body-size); line-height: var(--body-line); margin: 0; }
.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); }
.body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); }

.label, .eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  line-height: var(--label-line);
  letter-spacing: var(--label-track);
  text-transform: var(--label-case);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-track);
  color: var(--fg-3);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: var(--mono-track);
}

/* Editorial italic display flourish — used in marketing for
   long-form pull quotes (e.g. "One of history's few iron laws…") */
.editorial {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- Base ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
}
* { box-sizing: border-box; }