/* ============================================================
   Qoty Design System — Foundations (v3 — Light MOEX-style)
   Light-first. Primary = institutional navy. Secondary = amber.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ===== Surfaces — light, MOEX-like ===== */
  --paper:           oklch(99% 0.003 250);     /* page background, almost white with cool tint */
  --paper-deep:      oklch(96% 0.006 250);     /* zones of emphasis, footer */
  --surface:         #ffffff;                   /* cards, panels */
  --surface-2:       oklch(98% 0.004 250);      /* hover, subtle alt */
  --surface-3:       oklch(96% 0.006 250);      /* table headers, inputs */

  --border:          oklch(90% 0.008 250);
  --border-strong:   oklch(80% 0.012 250);
  --divider:         oklch(94% 0.006 250);

  /* ===== Text — navy-tinted ink for institutional feel ===== */
  --ink:             oklch(20% 0.025 245);     /* primary */
  --ink-2:           oklch(36% 0.020 245);     /* body */
  --ink-muted:       oklch(50% 0.015 245);     /* labels */
  --ink-faint:       oklch(64% 0.012 250);     /* axes, captions */

  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-muted);
  --fg-4: var(--ink-faint);

  /* ===== Brand — Qoty Navy (institutional, MOEX-like) ===== */
  --brand:        oklch(36% 0.13 245);
  --brand-hover:  oklch(30% 0.13 245);
  --brand-press:  oklch(26% 0.13 245);
  --brand-soft:   oklch(95% 0.025 245);
  --brand-tint:   oklch(36% 0.13 245 / 0.10);
  --brand-strong: oklch(28% 0.14 245);
  --fg-on-brand:  oklch(99% 0.003 250);

  /* ===== Accent — Qoty Amber (secondary, for TL;DR / Pro / CPA premium) ===== */
  --accent:        oklch(68% 0.14 60);
  --accent-hover:  oklch(62% 0.14 60);
  --accent-soft:   oklch(96% 0.05 70);
  --accent-tint:   oklch(68% 0.14 60 / 0.12);

  /* Legacy alias — old files used these names */
  --qoty-amber:        var(--accent);
  --qoty-amber-hover:  var(--accent-hover);
  --qoty-amber-soft:   var(--accent-soft);
  --qoty-amber-tint:   var(--accent-tint);
  --qoty-green:        var(--brand);
  --qoty-green-hover:  var(--brand-hover);
  --qoty-green-soft:   var(--brand-soft);
  --qoty-green-tint:   var(--brand-tint);

  /* ===== Semantic ===== */
  --up:                oklch(50% 0.18 148);
  --up-soft:           oklch(95% 0.05 148);
  --down:              oklch(56% 0.21 25);
  --down-soft:         oklch(96% 0.06 25);
  --warn:              oklch(68% 0.14 60);
  --warn-soft:         oklch(96% 0.05 70);
  --info:              oklch(50% 0.14 235);
  --info-soft:         oklch(95% 0.04 235);

  /* ===== Credit ratings ===== */
  --rating-aaa:        oklch(45% 0.16 148);
  --rating-bbb:        oklch(55% 0.14 70);
  --rating-b:          oklch(58% 0.18 50);
  --rating-c:          oklch(56% 0.21 25);

  /* ===== Type ===== */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:      11px;
  --text-sm:      13px;
  --text-base:    15px;
  --text-lg:      17px;
  --text-xl:      20px;
  --text-2xl:     26px;
  --text-3xl:     34px;
  --text-4xl:     46px;
  --text-display: 64px;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-loose:   1.7;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.015em;
  --tracking-wide:    0.04em;

  /* ===== Spacing (4px base) ===== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ===== Radii — sharp, institutional ===== */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-pill:  999px;

  /* ===== Shadows — subtle, layered ===== */
  --shadow-xs:  0 1px 0 oklch(20% 0.02 245 / 0.04);
  --shadow-sm:  0 1px 2px oklch(20% 0.02 245 / 0.05), 0 1px 1px oklch(20% 0.02 245 / 0.03);
  --shadow-md:  0 4px 12px oklch(20% 0.02 245 / 0.06), 0 1px 3px oklch(20% 0.02 245 / 0.04);
  --shadow-lg:  0 12px 36px oklch(20% 0.02 245 / 0.10), 0 4px 12px oklch(20% 0.02 245 / 0.05);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand);

  /* ===== Motion ===== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-fast:    180ms;
  --dur-slow:    320ms;

  /* ===== Layout ===== */
  --container:      1240px;
  --container-wide: 1360px;
  --container-text: 720px;

  /* ===== Grid texture ===== */
  --grid-line: oklch(85% 0.008 250 / 0.6);
}

/* ============================================================
   Dark theme — opt-in via [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
  --paper:           oklch(15% 0.018 250);
  --paper-deep:      oklch(13% 0.020 250);
  --surface:         oklch(19% 0.018 250);
  --surface-2:       oklch(23% 0.018 250);
  --surface-3:       oklch(27% 0.018 250);
  --border:          oklch(28% 0.015 250);
  --border-strong:   oklch(38% 0.015 250);
  --divider:         oklch(24% 0.015 250);
  --ink:             oklch(96% 0.008 90);
  --ink-2:           oklch(82% 0.008 90);
  --ink-muted:       oklch(62% 0.012 250);
  --ink-faint:       oklch(48% 0.015 250);
  --brand:           oklch(70% 0.14 240);
  --brand-hover:     oklch(74% 0.14 240);
  --brand-soft:      oklch(28% 0.10 240);
  --brand-tint:      oklch(70% 0.14 240 / 0.18);
  --accent:          oklch(78% 0.14 75);
  --accent-soft:     oklch(32% 0.08 75);
  --fg-on-brand:     oklch(15% 0.018 250);
  --grid-line:       oklch(28% 0.015 250 / 0.5);
}

/* ============================================================
   Typography helpers
   ============================================================ */
.h-display, .h1, .h2, .h3, .h4, .h5, p, .lead, .caption, .mono {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-1);
}
.h-display { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); line-height: 1.0; letter-spacing: -0.035em; }
.h1 { font-weight: 800; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.h2 { font-weight: 800; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.h3 { font-weight: 700; font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.h4 { font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-snug); }
.h5 { font-weight: 700; font-size: var(--text-lg); line-height: var(--leading-snug); }
.lead { font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg-2); }
p, .body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-2); }
.body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-3); }
.caption { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-3); letter-spacing: 0.02em; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'zero' 1; }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }

.ticker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

html, body {
  background: var(--paper);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

::selection { background: var(--brand-tint); color: var(--ink); }