/* ==========================================================================
   Arbitova — Design Tokens
   Single source of truth for all visual variables.
   Import this before any other stylesheet.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Surfaces ── */
  --bg-base:      #080808;
  --bg-surface:   #111111;
  --bg-raised:    #181818;
  --bg-overlay:   #202020;

  /* ── Borders ── */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  /* ── Text ── */
  --text-primary:   #F2F2F2;
  --text-secondary: #8A8A8A;
  --text-tertiary:  #555555;
  --text-disabled:  #333333;

  /* ── Brand (unified teal — replaces all previous indigo/purple usage) ── */
  --brand:          #00C896;
  --brand-hover:    #00DBA6;
  --brand-dim:      rgba(0,200,150,0.10);
  --brand-border:   rgba(0,200,150,0.25);

  /* ── Semantic ── */
  --success:        #00C896;
  --success-bg:     rgba(0,200,150,0.10);
  --success-border: rgba(0,200,150,0.25);
  --warning:        #F59E0B;
  --warning-bg:     rgba(245,158,11,0.10);
  --warning-border: rgba(245,158,11,0.25);
  --danger:         #EF4444;
  --danger-bg:      rgba(239,68,68,0.10);
  --danger-border:  rgba(239,68,68,0.25);
  --neutral:        #6B7280;
  --neutral-bg:     rgba(107,114,128,0.10);

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

  /* ── Spacing (8px 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;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);

  /* ── Transitions ── */
  --ease:     cubic-bezier(0.4,0,0.2,1);
  --duration: 150ms;

  /* ── Layout ── */
  --sidebar-width: 240px;
  --content-max:   1100px;
  --nav-height:    56px;

  /* Legacy aliases — keeps existing main.css working without rewrite */
  --bg:             var(--bg-base);
  --surface:        var(--bg-surface);
  --surface-raised: var(--bg-raised);
  --border:         var(--border-default);
  --border-light:   var(--border-strong);
  --text:           var(--text-primary);
  --text-secondary: #8A8A8A;
  --text-dim:       var(--text-tertiary);
  --text-soft:      var(--text-secondary);
  --accent:         var(--brand);
  --accent-hover:   var(--brand-hover);
  --accent-muted:   var(--brand-dim);
  --accent-border:  var(--brand-border);
  --error:          var(--danger);
  --error-bg:       var(--danger-bg);
  --error-border:   var(--danger-border);
  --font-sans:      var(--font-ui);
  --radius-card:    var(--radius-md);
  --radius-btn:     var(--radius-sm);
  --radius-input:   var(--radius-sm);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg-base:      #F5F5F5;
  --bg-surface:   #FFFFFF;
  --bg-raised:    #F0F0F0;
  --bg-overlay:   #E8E8E8;
  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);
  --text-primary:   #111111;
  --text-secondary: #666666;
  --text-tertiary:  #999999;
  --brand:          #00A87C;
  --brand-hover:    #009670;
}