/* ============================================================================
   XTrades Design Tokens
   Единая семантическая палитра. Все секции должны использовать var(--token),
   а не raw цвета. Менять глобально — в этом файле.
   ============================================================================ */

:root {
  /* ──────────────────────────────────────────────────────────────────────────
     Surfaces (по слоям elevation)
     ────────────────────────────────────────────────────────────────────────── */
  --bg-base:           #09090b;            /* page background */
  --bg-elevated:       #0f0f10;            /* первый слой surface */
  --bg-secondary:      #131316;            /* input/inset surface — между base и card */
  --bg-card:           #18181b;            /* основная карточка */
  --bg-card-hover:     #1f1f23;            /* hover карточки */
  --bg-overlay:        rgba(9, 9, 11, 0.85);

  /* ──────────────────────────────────────────────────────────────────────────
     Borders (hairline-friendly)
     ────────────────────────────────────────────────────────────────────────── */
  --border-subtle:     rgba(255, 255, 255, 0.06);
  --border-default:    rgba(255, 255, 255, 0.10);
  --border-medium:     rgba(255, 255, 255, 0.12);
  --border-strong:     rgba(255, 255, 255, 0.16);

  /* ──────────────────────────────────────────────────────────────────────────
     Text (foreground)
     ────────────────────────────────────────────────────────────────────────── */
  --fg-primary:        rgba(255, 255, 255, 0.95);
  --fg-secondary:      rgba(255, 255, 255, 0.70);
  --fg-tertiary:       rgba(255, 255, 255, 0.45);
  --fg-quaternary:     rgba(255, 255, 255, 0.30);
  --fg-disabled:       rgba(255, 255, 255, 0.18);

  /* ──────────────────────────────────────────────────────────────────────────
     Accent (brand sapphire — глубже cyan для премиум-feel и контраста)
     ────────────────────────────────────────────────────────────────────────── */
  --accent:            #02a5d8;             /* base sapphire */
  --accent-hover:      #00aee4;             /* lighter — бывший бренд-cyan, оживает на hover */
  --accent-active:     #0193c1;             /* press state — на полтона глубже base */
  --accent-soft:       rgba(2, 165, 216, 0.12);
  --accent-border:     rgba(2, 165, 216, 0.28);
  --accent-glow:       rgba(2, 165, 216, 0.32); /* для hover-elevation halo */
  --accent-fg-on:      #ffffff;             /* text on accent surface */

  /* ──────────────────────────────────────────────────────────────────────────
     Semantic states
     ────────────────────────────────────────────────────────────────────────── */
  --success:           #22c55e;
  --success-soft:      rgba(34, 197, 94, 0.12);
  --success-border:    rgba(34, 197, 94, 0.25);
  --warning:           #f59e0b;
  --warning-soft:      rgba(245, 158, 11, 0.12);
  --danger:            #ef4444;
  --danger-soft:       rgba(239, 68, 68, 0.12);

  /* ──────────────────────────────────────────────────────────────────────────
     Typography
     ────────────────────────────────────────────────────────────────────────── */
  --font-display:      "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:         ui-monospace, "JetBrains Mono", "Menlo", monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  56px;

  /* Weights */
  --weight-light:  300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* Letter-spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;

  /* Line-height */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ──────────────────────────────────────────────────────────────────────────
     Spacing (4pt grid)
     ────────────────────────────────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Section vertical rhythm — Linear/Vercel-tier (было 128/80, слишком воздушно) */
  --section-y:        88px;
  --section-y-mobile: 56px;
  --section-head-gap: 48px;
  --section-head-gap-mobile: 32px;

  /* ──────────────────────────────────────────────────────────────────────────
     Radii
     ────────────────────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 999px;

  /* ──────────────────────────────────────────────────────────────────────────
     Shadows
     ────────────────────────────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.22);
  --shadow-md:   0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 32px rgba(0, 174, 228, 0.18);

  /* ──────────────────────────────────────────────────────────────────────────
     Motion
     ────────────────────────────────────────────────────────────────────────── */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;

  /* ──────────────────────────────────────────────────────────────────────────
     Layout
     ────────────────────────────────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  24px;

  /* ──────────────────────────────────────────────────────────────────────────
     Z-index
     ────────────────────────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  500;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   1100;
}