/* ==========================================================================
   Trusty Design System — Core tokens
   ========================================================================== */

/* Onest — brand display + body face. Geometric humanist, low contrast,
   slightly condensed, friendly terminals. Loaded from local TTFs so it
   works offline and in exports. Variable font is registered separately
   so CSS `font-weight: 1 → 900` interpolates smoothly when used. */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/Onest-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/Onest-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Onest-Light.ttf') format('truetype'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Onest-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Onest-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Onest-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Onest-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Onest-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/Onest-Black.ttf') format('truetype'); }
@font-face { font-family: 'Onest VF'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Onest-VariableFont_wght.ttf') format('truetype-variations'); }

/* Golos Text for data/numerics (tabular) and JetBrains Mono for code.
   Both are free Google Fonts — safe to import. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand Blues (primary) ---------- */
  --blue-50:  #F0F3FF;
  --blue-100: #E2E8FF;
  --blue-200: #B8C7FF;
  --blue-300: #8DA5FF;
  --blue-400: #5D7BFF;
  --blue-500: #2962FF; /* Brand primary — logo core */
  --blue-600: #2949FF; /* Deep primary — darker surfaces */
  --blue-700: #1F3ADB;
  --blue-800: #172CA8;
  --blue-900: #0F1E75;

  /* ---------- Accent Magenta (agressive highlight / CTA-alt) ---------- */
  --magenta-50:  #FFEBF8;
  --magenta-100: #FFCEEF;
  --magenta-300: #F36AD5;
  --magenta-500: #E838D2; /* Accent — confetti/hero pop */
  --magenta-600: #D021A4; /* Deep accent */
  --magenta-700: #A9197F;

  /* ---------- Neutrals (cool, slight blue cast) ---------- */
  --navy-ink:  #1D2550; /* Primary text on light */
  --ink-900:   #0B1030;
  --ink-800:   #191D2D;
  --ink-700:   #2A2F45;
  --slate-500: #5A6081;
  --slate-400: #8388A8;
  --slate-300: #C0C1C5;
  --slate-200: #D9D9D9;
  --slate-100: #E8E9EF;
  --bg-tint:   #F6F6F9; /* Page tint — the signature Trusty off-white */
  --bg-alt:    #F9F9F9;
  --white:     #FFFFFF;

  /* ---------- Data / state semantic ---------- */
  --ok:      #16A34A;
  --ok-soft: #DCFCE7;
  --warn:    #FF9829; /* present in Figma palette */
  --warn-soft: #FFE9C7;
  --risk:    #E23A55;
  --risk-soft: #FDE3E7;
  --info:    var(--blue-500);
  --info-soft: var(--blue-50);

  /* ---------- Chart palette (ordered) ---------- */
  --chart-1: #2962FF;
  --chart-2: #E838D2;
  --chart-3: #16A34A;
  --chart-4: #FF9829;
  --chart-5: #6890FF;
  --chart-6: #1D2550;
  --chart-7: #8DA5FF;

  /* ---------- Marketplace brand chips (for case/proof strips) ---------- */
  --mp-wb:    #CB11AB;     /* Wildberries */
  --mp-ozon:  #005BFF;     /* Ozon */
  --mp-yandex:#FFCC00;     /* Yandex Market */

  /* ---------- Semantic surface tokens (light theme default) ---------- */
  --surface-0: var(--white);
  --surface-1: var(--bg-tint);
  --surface-2: var(--slate-100);
  --surface-inverse: var(--blue-500);

  --fg-1: var(--navy-ink);   /* primary text */
  --fg-2: var(--slate-500);  /* secondary text */
  --fg-3: var(--slate-400);  /* tertiary / captions */
  --fg-on-accent: var(--white);
  --fg-link: var(--blue-500);

  --border-subtle: rgba(29, 37, 80, 0.08);
  --border-strong: rgba(29, 37, 80, 0.16);
  --border-inverse: rgba(255, 255, 255, 0.18);

  --focus-ring: 0 0 0 3px rgba(41, 98, 255, 0.35);

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;
  --r-card: 20px;     /* default card */
  --r-section: 30px;  /* hero / big surfaces */

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

  /* ---------- Shadows (light, cool cast) ---------- */
  --shadow-xs: 0 1px 2px rgba(29, 37, 80, 0.05);
  --shadow-sm: 0 2px 6px rgba(29, 37, 80, 0.06);
  --shadow-md: 0 8px 24px rgba(29, 37, 80, 0.08);
  --shadow-lg: 0 20px 48px rgba(29, 37, 80, 0.12);
  --shadow-pop: 0 24px 60px rgba(41, 98, 255, 0.22);
  --shadow-inset: inset 0 0 0 1px var(--border-subtle);

  /* ---------- Type faces ---------- */
  --font-display: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data:    'Golos Text', 'Onest', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ---------- Type scale (1366 reference) ---------- */
  --fs-display: 72px;   /* hero */
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-sm:      15px;
  --fs-xs:      13px;
  --fs-micro:   11px;

  --lh-tight:   1.04;
  --lh-snug:    1.12;
  --lh-normal:  1.35;
  --lh-body:    1.5;
  --lh-loose:   1.6;

  --tracking-tight: -0.02em;
  --tracking-flat:  -0.01em;
  --tracking-upper:  0.08em;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================== DARK THEME ============================== */
[data-theme='dark'] {
  --surface-0: #0B1030;     /* deep navy */
  --surface-1: #121735;
  --surface-2: #1A2048;
  --surface-inverse: var(--blue-500);

  --fg-1: #F1F2F8;
  --fg-2: #A9AFCC;
  --fg-3: #757B9C;
  --fg-on-accent: var(--white);
  --fg-link: #8DA5FF;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 24px 60px rgba(41, 98, 255, 0.45);

  color-scheme: dark;
}

/* ============================= SEMANTIC TAGS ============================ */
html, body {
  background: var(--surface-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-flat); }

p  { margin: 0; color: var(--fg-2); line-height: var(--lh-body); text-wrap: pretty; }

small { font-size: var(--fs-xs); color: var(--fg-3); }

code, kbd, pre { font-family: var(--font-mono); }

.eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-upper);
  font-weight: 600;
  color: var(--blue-500);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  font-weight: 700;
}

.mono-num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}