/* rucmc — design tokens (light theme) */
:root {
  /* surface */
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F8FAFC;
  --bg-tertiary:   #F1F5F9;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  /* text */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-tertiary:  #64748B;  /* AA-контраст на белом (≈4.8:1); было #94A3B8 (2.85:1) */

  /* brand & semantic */
  --brand:       #1652F0;
  --brand-hover: #0E40C9;
  --brand-soft:  #E8EEFE;

  --up:        #16A34A;
  --up-bg:     #DCFCE7;
  --down:      #DC2626;
  --down-bg:   #FEE2E2;
  --neutral:   #64748B;
  --warning:   #F59E0B;
  --success:   #10B981;

  /* radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* shadows */
  --shadow-card:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-pop:   0 8px 24px rgba(15, 23, 42, 0.10);

  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* container */
  --container-max: 1280px;
  --container-pad: 24px;

  /* layout chrome */
  --header-h: 64px;
  --ticker-h: 32px;

  /* easing */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
table, .tabular { font-variant-numeric: tabular-nums; }

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

button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* type scale */
.t-h1   { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.t-h2   { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0; }
.t-h3   { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0; }
.t-price{ font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em;
          font-variant-numeric: tabular-nums; margin: 0; }
.t-body { font-size: 15px; font-weight: 400; line-height: 1.6; }
.t-small{ font-size: 13px; font-weight: 400; line-height: 1.5; }
.t-cap  { font-size: 12px; font-weight: 500; line-height: 1.4;
          text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }
.t-num  { font-size: 14px; font-weight: 500; line-height: 1.4;
          font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.muted { color: var(--text-secondary); }
.faint { color: var(--text-tertiary); }
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.up    { color: var(--up); }
.down  { color: var(--down); }

/* ---------- dark theme ---------- */
:root[data-theme="dark"] {
  --bg-primary:    #0B0E13;
  --bg-secondary:  #131820;
  --bg-tertiary:   #1C2330;
  --border:        #1F2937;
  --border-strong: #334155;

  --text-primary:   #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary:  #64748B;

  --brand:       #3B82F6;
  --brand-hover: #60A5FA;
  --brand-soft:  #1E3A8A;

  --up:        #22C55E;
  --up-bg:     #052E1A;
  --down:      #EF4444;
  --down-bg:   #3F0F0F;
  --neutral:   #64748B;
  --warning:   #F59E0B;
  --success:   #22C55E;

  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-pop:   0 8px 24px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--bg-primary); }
:root[data-theme="dark"] .tabs { background: #0B0E13; }
:root[data-theme="dark"] .tabs button.active,
:root[data-theme="dark"] .seg-ctrl button.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ---------- responsive breakpoints ---------- */
@media (max-width: 1024px) {
  :root { --container-pad: 20px; }
}
@media (max-width: 640px) {
  :root { --container-pad: 16px; --header-h: 56px; --ticker-h: 28px; }
  body { font-size: 14px; }
  .t-h1   { font-size: 24px; }
  .t-h2   { font-size: 20px; }
  .t-h3   { font-size: 16px; }
  .t-price{ font-size: 28px; }
}
.hide-mobile { }
.show-mobile { display: none !important; }
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: initial !important; }
}