/* ============================================================
   N9NE / nine.ub9 — Design Tokens
   Colors, type, and primitive system variables.
   Y2K / Retro-tech aesthetic for Mongolian Gen Z.
   ============================================================ */

/* ---- Webfonts ---- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Nunito Sans";
  src: url("./fonts/NunitoSans-Variable.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — primitive palette (raw hex from brand)
     ============================================================ */

  /* Ink + structural blacks */
  --ink:           #0E0D11;  /* primary black, headlines, body */
  --cta-black:     #1F1D23;  /* buttons, footer */
  --ink-700:       #2A2830;  /* slightly lifted ink for hovers */

  /* Chrome gradient — signature "liquid silver" */
  --chrome-light:  #EAE9ED;
  --chrome-mid:    #C9C8CE;
  --chrome-dark:   #98979E;
  --chrome-grad:   linear-gradient(135deg, var(--chrome-mid) 0%, var(--chrome-light) 50%, var(--chrome-dark) 100%);
  --chrome-grad-vertical: linear-gradient(180deg, var(--chrome-light) 0%, var(--chrome-mid) 45%, var(--chrome-dark) 100%);

  /* Surface neutrals */
  --bg:            #FFFFFF;   /* pure white, breathing space */
  --bg-card:       #FAFAFB;   /* card background */
  --border:        #E8E7E9;   /* card border, dividers */
  --border-soft:   #F2F1F3;

  /* Accent colors — restricted usage */
  --sale-orange:   #FF6A30;   /* SALE TAGS ONLY — never CTAs */
  --hl-yellow:     #FFEC42;   /* highlight chips, important words */
  --hl-pink:       #FF3B6F;   /* reels text highlights */

  /* Text scale */
  --fg-1:          #0E0D11;   /* primary text */
  --fg-2:          #4A4852;   /* secondary text */
  --fg-3:          #8A8990;   /* muted / meta */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  rgba(255,255,255,0.72);

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-display:  "Inter", "Nunito Sans", system-ui, sans-serif;
  --font-body:     "Inter", "Nunito Sans", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-script:   "Caveat", "Brush Script MT", cursive;

  /* ============================================================
     TYPE — size + weight scale
     ============================================================ */
  --fs-mono:       11px;
  --fs-meta:       12px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-h4:         22px;
  --fs-h3:         32px;
  --fs-h2:         48px;
  --fs-h1:         72px;
  --fs-display:    120px;

  --lh-tight:      0.95;
  --lh-snug:       1.1;
  --lh-body:       1.5;
  --lh-loose:      1.65;

  --tracking-display: -0.035em;
  --tracking-mono:    0.15em;

  /* ============================================================
     SPACING + RADIUS + SHADOW
     ============================================================ */
  --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;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --shadow-card:  0 1px 2px rgba(14,13,17,0.04), 0 4px 16px rgba(14,13,17,0.06);
  --shadow-pop:   0 8px 24px rgba(14,13,17,0.12);
  --shadow-inset-chrome: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.08);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use class names OR apply via the element selectors below.
   ============================================================ */

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

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

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

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

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.t-h4, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.t-body-sm, small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.t-mono, .t-meta, code, kbd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-script {
  font-family: var(--font-script);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Inline highlights for Reels overlay style */
.hl-yellow { background: var(--hl-yellow); padding: 0 0.18em; color: var(--ink); }
.hl-pink   { background: var(--hl-pink);   padding: 0 0.18em; color: #fff; }

/* Chrome text effect (signature liquid silver) */
.t-chrome {
  background: linear-gradient(180deg, #FFFFFF 0%, #C9C8CE 45%, #6E6D74 70%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}