/* ═══════════════════════════════════════════════════════════════
   CSS DESIGN TOKENS — GlobalWay Unified Theme
   Единый источник стилей для всех страниц экосистемы
   v3.0 — Cosmic Gold Theme
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══ CORE PALETTE ═══ */
  --cosmic-black: #001a33;
  --cosmic-deep: #000d1a;
  --cosmic-mid: #0a1628;
  --cosmic-surface: #0d2040;

  /* Card backgrounds */
  --bg-card: rgba(0, 26, 51, 0.8);
  --bg-card-hover: rgba(0, 36, 71, 0.85);
  --bg-card-solid: #001a33;
  --bg-elevated: rgba(13, 32, 64, 0.9);
  --bg-input: rgba(0, 15, 35, 0.8);
  --bg-overlay: rgba(0, 10, 20, 0.95);

  /* Text */
  --text-light: #ffffff;
  --text-primary: #f0f2f5;
  --text-secondary: #c8cdd2;
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-disabled: rgba(255, 255, 255, 0.3);

  /* ═══ ACCENT — GOLD (PRIMARY) ═══ */
  --gold: #ffd700;
  --gold-light: #ffe44d;
  --gold-dim: #c8a800;
  --gold-bg: rgba(255, 215, 0, 0.08);
  --gold-bg-hover: rgba(255, 215, 0, 0.15);
  --border-gold: rgba(255, 215, 0, 0.3);
  --border-gold-active: rgba(255, 215, 0, 0.6);
  --glow-gold: 0 0 20px rgba(255, 215, 0, 0.2);
  --glow-gold-strong: 0 0 30px rgba(255, 215, 0, 0.35);

  /* ═══ DIRECTION COLORS (secondary accents) ═══ */
  --color-gw: #00d4ff;
  --color-cg: #ff6b9d;
  --color-nss: #00ff88;

  /* ═══ STATUS COLORS ═══ */
  --success: #28a745;
  --success-bg: rgba(40, 167, 69, 0.12);
  --danger: #dc3545;
  --danger-bg: rgba(220, 53, 69, 0.12);
  --warning: #ffc107;
  --warning-bg: rgba(255, 193, 7, 0.12);
  --info: #17a2b8;
  --info-bg: rgba(23, 162, 184, 0.12);

  /* ═══ TYPOGRAPHY ═══ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-heading: 22px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ═══ SPACING ═══ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* ═══ BORDER RADIUS ═══ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-round: 50%;

  /* ═══ SHADOWS ═══ */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 4px 12px rgba(255, 215, 0, 0.25);
  --shadow-gold-sm: 0 2px 8px rgba(255, 215, 0, 0.1);
  --shadow-gold-md: 0 4px 16px rgba(255, 215, 0, 0.15);
  --shadow-gold-lg: 0 8px 32px rgba(255, 215, 0, 0.25);
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);

  /* ═══ TRANSITIONS ═══ */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ═══ Z-INDEX ═══ */
  --z-dropdown: 50;
  --z-nav: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ═══ UNIFIED COMPONENT TOKENS ═══ */
  /* Cards */
  --card-bg: var(--bg-card);
  --card-border: var(--border-gold);
  --card-radius: var(--radius-lg);
  --card-padding: var(--spacing-lg);
  --card-shadow: var(--shadow-gold-sm);

  /* Buttons — Primary (Gold) */
  --btn-primary-bg: linear-gradient(135deg, var(--gold), var(--gold-dim));
  --btn-primary-text: #000;
  --btn-primary-hover: linear-gradient(135deg, var(--gold-light), var(--gold));
  --btn-primary-shadow: var(--shadow-gold-md);

  /* Buttons — Secondary (Outline) */
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--border-gold);
  --btn-secondary-text: var(--gold);
  --btn-secondary-hover-bg: var(--gold-bg);

  /* Inputs */
  --input-bg: var(--bg-input);
  --input-border: rgba(255, 215, 0, 0.2);
  --input-border-focus: var(--gold);
  --input-text: var(--text-light);
  --input-placeholder: var(--text-muted);
  --input-radius: var(--radius-md);
  --input-padding: var(--spacing-sm) var(--spacing-md);

  /* Section headers */
  --section-title-color: var(--gold);
  --section-subtitle-color: var(--text-secondary);

  /* Page padding */
  --page-padding: var(--spacing-md);
  --page-max-width: 600px;
}

/* ═══ RESPONSIVE OVERRIDES ═══ */
@media (max-width: 480px) {
  :root {
    --font-size-heading: 18px;
    --font-size-2xl: 18px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --card-padding: var(--spacing-md);
    --page-padding: var(--spacing-sm);
  }
}