/* ══════════════════════════════════════════════════════════════
   PLATOX DESIGN TOKENS — Single Source of Truth
   ──────────────────────────────────────────────────────────────
   Change a value here → it propagates everywhere.
   Never define design values in app.css or component files.
   ══════════════════════════════════════════════════════════════ */

/* ── Dark Theme (default) ── */
:root,
[data-theme="dark"] {

  /* ── Primitive Color Palette (use semantic tokens below) ── */
  --_coral:   #ff7a59;
  --_teal:    #00a4bd;
  --_green:   #00bda5;
  --_amber:   #f5c26b;
  --_red:     #f2545b;
  --_cyan:    #22d3ee;
  --_purple:  #8b5cf6;
  --_blue:    #5b7cfa;

  /* ── Color: Surfaces ── */
  --color-bg:             #0f1419;
  --color-surface:        #1a1f2e;
  --color-surface-raised: #232838;
  --color-border:         #2d3548;
  --color-border-subtle:  rgba(45, 53, 72, 0.4);

  /* ── Color: Text ── */
  --color-text:           #e8ecf1;
  --color-text-secondary: #94a3b8;
  --color-text-muted:     #64748b;

  /* ── Color: Accent — Coral (primary action) ── */
  --color-accent:         #ff7a59;
  --color-accent-hover:   #e8603f;
  --color-accent-subtle:  rgba(255, 122, 89, 0.08);
  --color-accent-border:  rgba(255, 122, 89, 0.20);

  /* ── Color: Semantic States ── */
  --color-success:        #00bda5;
  --color-success-subtle: rgba(0, 189, 165, 0.08);
  --color-warning:        #f5c26b;
  --color-warning-subtle: rgba(245, 194, 107, 0.08);
  --color-danger:         #f2545b;
  --color-danger-subtle:  rgba(242, 84, 91, 0.08);
  --color-info:           #00a4bd;
  --color-info-subtle:    rgba(0, 164, 189, 0.08);
  --color-link:           #22d3ee;

  /* ── Color: Charts ── */
  --color-chart-grid:     rgba(255, 255, 255, 0.04);

  /* ── Color: AI Aesthetic (blue/purple — intentional, separate from accent) ── */
  --color-ai-accent:      #5b7cfa;
  --color-ai-secondary:   #8b5cf6;
  --color-ai-subtle:      rgba(91, 124, 250, 0.08);
  --color-ai-subtle-sm:   rgba(91, 124, 250, 0.04);
  --color-ai-border:      rgba(91, 124, 250, 0.18);

  /* ── Spacing Scale (4pt grid) ── */
  --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;

  /* ── Border Radius Scale ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* ── Typography Scale ── */
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  20px;
  --font-size-3xl:  24px;
  --font-size-4xl:  28px;

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

  --line-height-tight:   1.3;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.6;

  /* ── Z-Index Scale ── */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ── Shadow Scale ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* ── Motion / Transition Scale ── */
  --motion-fast: 150ms ease;
  --motion-base: 200ms ease;
  --motion-slow: 250ms ease-out;

  /* ── Layout Dimensions ── */
  --sidebar-width:     240px;
  --header-height:      56px;
  --min-touch-target:   44px;

  /* ══════════════════════════════════════════════════════════
     Legacy Aliases — keeps all existing var(--*) working.
     Do not use in new code — use --color-* tokens instead.
     ══════════════════════════════════════════════════════════ */
  --primary:         var(--color-accent);
  --bg:              var(--color-bg);
  --bg-card:         var(--color-surface);
  --bg-elevated:     var(--color-surface-raised);
  --border:          var(--color-border);
  --text:            var(--color-text);
  --text-secondary:  var(--color-text-secondary);
  --text-muted:      var(--color-text-muted);
  --accent:          var(--color-accent);
  --accent-hover:    var(--color-accent-hover);
  --success:         var(--color-success);
  --warning:         var(--color-warning);
  --danger:          var(--color-danger);
  --shadow:          var(--shadow-sm);
  --input-bg:        var(--color-surface);
  --tooltip-bg:      var(--color-surface);
  --tooltip-border:  var(--color-border);
  --chart-grid:      var(--color-chart-grid);
  --scrollbar-thumb: var(--color-border);
  --badge-gray-bg:   rgba(255, 255, 255, 0.06);
  --badge-gray-text: var(--color-text-secondary);
  --v30-coral:       var(--color-accent);
  --v30-teal:        var(--color-info);
  --v30-link:        var(--color-link);
}

/* ── Light Theme ── */
[data-theme="light"] {

  /* ── Color: Surfaces ── */
  --color-bg:             #f5f8fa;
  --color-surface:        #ffffff;
  --color-surface-raised: #f0f3f5;
  --color-border:         #cbd6e2;
  --color-border-subtle:  rgba(203, 214, 226, 0.4);

  /* ── Color: Text ── */
  --color-text:           #33475b;
  --color-text-secondary: #516f90;
  --color-text-muted:     #7c98b6;

  /* ── Color: Accent — same in both themes ── */
  --color-accent:         #ff7a59;
  --color-accent-hover:   #e8603f;
  --color-accent-subtle:  rgba(255, 122, 89, 0.06);

  /* ── Color: Semantic States ── */
  --color-success:        #00bda5;
  --color-success-subtle: rgba(0, 189, 165, 0.06);
  --color-warning:        #d4920a;
  --color-warning-subtle: rgba(245, 194, 107, 0.08);
  --color-danger:         #f2545b;
  --color-danger-subtle:  rgba(242, 84, 91, 0.06);
  --color-info:           #0091ae;
  --color-info-subtle:    rgba(0, 145, 174, 0.08);
  --color-link:           #0091ae;

  /* ── Color: Charts ── */
  --color-chart-grid:     rgba(0, 0, 0, 0.04);

  /* ── Shadows (lighter in light mode) ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* ── Legacy overrides for light mode ── */
  --badge-gray-bg:   rgba(51, 71, 91, 0.06);
  --badge-gray-text: var(--color-text-secondary);
  --v30-teal:        var(--color-info);
  --v30-link:        var(--color-link);
}