/* =========================================================================
   Duo.mn — Foundations
   Source of truth for color tokens, typography, spacing, motion.
   Brand: Duo.mn — "AI + Human" — Mongolian-first AI product suite
   ========================================================================= */

@font-face {
  font-family: 'Golos Text';
  src: url('fonts/GolosText-VariableFont.woff2') format('woff2-variations'),
       url('fonts/GolosText-VariableFont.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color: brand primitives ---------- */
  --navy: #1E40AF;          /* primary brand surface (per brief) */
  --navy-deep: #17307D;     /* deeper navy for layering / depth wells */
  --navy-soft: #2A52BE;     /* lighter navy for ambient blobs */
  --coral: #FB7185;         /* accent — used sparingly */
  --coral-deep: #E5556B;    /* coral pressed / hover */
  --ink: #0B0F19;           /* darkest surface, near-black */
  --white: #FFFFFF;

  /* ---------- Color: alpha whites (for navy backgrounds) ---------- */
  --mist:        rgba(255, 255, 255, 0.70);  /* secondary text */
  --mist-soft:   rgba(255, 255, 255, 0.45);  /* tertiary text / hairlines */
  --mist-faint:  rgba(255, 255, 255, 0.20);  /* idle outlines */
  --mist-ghost:  rgba(255, 255, 255, 0.06);  /* dot pattern, subtle fills */

  /* ---------- Semantic foreground / background ---------- */
  --bg:     var(--navy);
  --bg-2:   var(--navy-deep);
  --bg-ink: var(--ink);

  --fg:     var(--white);
  --fg-2:   var(--mist);       /* secondary copy */
  --fg-3:   var(--mist-soft);  /* meta / footer */
  --accent: var(--coral);

  /* ---------- Type ---------- */
  --font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font); /* same family, weight 800 */

  /* Type scale (clamps for fluid mobile→desktop) */
  --t-eyebrow: 600 12px/1.2  var(--font);    /* uppercase chip */
  --t-h1:      800 clamp(48px, 9vw, 96px)/0.95 var(--font);
  --t-h2:      800 clamp(32px, 5vw, 56px)/1.05 var(--font);
  --t-h3:      700 clamp(22px, 2.6vw, 32px)/1.15 var(--font);
  --t-lead:    500 clamp(17px, 1.6vw, 20px)/1.5 var(--font);
  --t-body:    400 16px/1.55 var(--font);
  --t-small:   400 14px/1.5  var(--font);
  --t-micro:   500 12px/1.4  var(--font);
  --t-mono:    500 13px/1.5  ui-monospace, 'SF Mono', Menlo, monospace;

  /* Letter-spacing per the brief (display tight, micro loose) */
  --ls-display: -0.03em;   /* -3px on huge sizes */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.08em;    /* uppercase eyebrows */

  /* ---------- Spacing (4px 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;

  /* ---------- Radius ---------- */
  --r-sm:   8px;
  --r:      12px;          /* default — per brief */
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* primary easing — rotator, reveals */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);     /* hover / press */
  --d-fast:    150ms;
  --d:         200ms;
  --d-slow:    400ms;
  --d-reveal:  600ms;
  --d-hero:    800ms;

  /* ---------- Background atmospherics ---------- */
  --dot-pattern:
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 20px 20px;

  /* ---------- Focus ---------- */
  --focus-ring: 2px solid var(--coral);
  --focus-offset: 2px;
}

/* =========================================================================
   Semantic element styles
   These are the defaults you get when you import this stylesheet.
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font: var(--t-body);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font: var(--t-h1);
  letter-spacing: var(--ls-display);
  margin: 0;
}

h2, .h2 {
  font: var(--t-h2);
  letter-spacing: var(--ls-display);
  margin: 0;
}

h3, .h3 {
  font: var(--t-h3);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.lead {
  font: var(--t-lead);
  color: var(--fg-2);
}

p, .body {
  font: var(--t-body);
  color: var(--fg-2);
  margin: 0;
}

.small  { font: var(--t-small);  color: var(--fg-2); }
.micro  { font: var(--t-micro);  color: var(--fg-3); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.mono   { font: var(--t-mono); }

/* Eyebrow chip (coral) — used on coming-soon for "ТУН УДАХГҮЙ" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  background: var(--coral);
  color: var(--white);
  border-radius: var(--r-pill);
  font: 600 12px/1 var(--font);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Focus visibility — coral 2px, never removed */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

/* Reduced motion — nuke ambient + transitions, keep static fallback */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}