/* ==========================================================================
   Design Tokens -- Tilde Energy Trading
   Deep blue + warm white palette. Sophisticated, not neon.
   ========================================================================== */

:root {
  /* --- Colors --- */
  --color-bg:          #0a0a0a;
  --color-bg-alt:      #141428;
  --color-bg-section:  #16213e;
  --color-bg-card:     rgba(255, 255, 255, 0.035);
  --color-bg-card-hover: rgba(0, 170, 255, 0.06);

  --color-accent:      #00aaff;
  --color-accent-light:#5ca0ff;
  --color-accent-dim:  rgba(0, 170, 255, 0.15);
  --color-warm:        #f0ede6;
  --color-warm-dim:    rgba(240, 237, 230, 0.08);

  --color-text:        #f0ede6;
  --color-text-muted:  #9a9a9e;
  --color-text-dim:    #555560;
  --color-text-body:   #c0bfba;

  --color-border:      rgba(0, 170, 255, 0.10);
  --color-border-hover: rgba(0, 170, 255, 0.30);

  --color-error:       #ff6b6b;
  --color-success:     #4ade80;

  /* --- Gradients --- */
  --gradient-accent:   linear-gradient(135deg, #00aaff, #5ca0ff);
  --gradient-bg:       linear-gradient(135deg, #0a0a0a 0%, #141428 50%, #16213e 100%);
  --gradient-card:     linear-gradient(135deg, rgba(0, 170, 255, 0.05), rgba(92, 160, 255, 0.03));
  --gradient-glow:     linear-gradient(135deg, rgba(0, 170, 255, 0.20), rgba(92, 160, 255, 0.12));

  /* --- Typography --- */
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  --text-xs:           0.75rem;
  --text-sm:           0.875rem;
  --text-base:         1rem;
  --text-lg:           1.125rem;
  --text-xl:           1.25rem;
  --text-2xl:          1.5rem;
  --text-3xl:          2rem;
  --text-4xl:          2.5rem;
  --text-5xl:          clamp(2.5rem, 5vw, 3.5rem);
  --text-6xl:          clamp(3rem, 6vw, 4.5rem);

  --leading-tight:     1.2;
  --leading-normal:    1.6;
  --leading-relaxed:   1.8;

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

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;

  /* --- Spacing --- */
  --space-1:           0.25rem;
  --space-2:           0.5rem;
  --space-3:           0.75rem;
  --space-4:           1rem;
  --space-5:           1.25rem;
  --space-6:           1.5rem;
  --space-8:           2rem;
  --space-10:          2.5rem;
  --space-12:          3rem;
  --space-16:          4rem;
  --space-20:          5rem;
  --space-24:          6rem;
  --space-32:          8rem;

  /* --- Layout --- */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --container-pad:     2rem;

  /* --- Borders --- */
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         20px;
  --radius-xl:         28px;
  --radius-full:       9999px;

  /* --- Shadows --- */
  --shadow-glow-sm:    0 0 20px rgba(0, 170, 255, 0.12);
  --shadow-glow-md:    0 0 40px rgba(0, 170, 255, 0.16);
  --shadow-glow-lg:    0 0 80px rgba(0, 170, 255, 0.20);
  --shadow-card:       0 4px 30px rgba(0, 0, 0, 0.5);

  /* --- Transitions --- */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:     150ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-slower:   800ms;

  /* --- Z-index --- */
  --z-bg:              -1;
  --z-base:            0;
  --z-card:            10;
  --z-nav:             100;
  --z-overlay:         200;
  --z-modal:           300;
}

@media (max-width: 768px) {
  :root {
    --container-pad: 1.25rem;
    --space-24: 4rem;
    --space-20: 3rem;
    --space-16: 2.5rem;
  }
}