/* ============================================================
   DESIGN TOKENS — SPX Platform Design System
   
   所有顏色、字體、間距、圓角、陰影、過渡都定義在這裡。
   任何頁面只需 @import 這個檔案就能繼承統一的視覺語言。
   
   命名規則：--ds-{類別}-{用途}
   ============================================================ */

:root {
  /* ── 顏色：背景層級 ───────────────────────── */
  --ds-bg-primary:    #06070a;
  --ds-bg-surface:    #0e1017;
  --ds-bg-elevated:   #161822;
  --ds-bg-card:       #1a1c2b;
  --ds-bg-hover:      #22243a;

  /* ── 顏色：品牌 / 強調 ────────────────────── */
  --ds-accent:        #45a29e;
  --ds-accent-bright: #66fcf1;
  --ds-accent-dim:    #2d7370;
  --ds-accent-glow:   rgba(102, 252, 241, 0.12);
  --ds-accent-glow-strong: rgba(102, 252, 241, 0.25);

  /* ── 顏色：語義 ───────────────────────────── */
  --ds-success:       #34d399;
  --ds-warning:       #fbbf24;
  --ds-danger:        #f87171;
  --ds-info:          #60a5fa;

  /* ── 顏色：文字 ───────────────────────────── */
  --ds-text-primary:   #e8eaed;
  --ds-text-secondary: #8b8fa3;
  --ds-text-muted:     #4a4d5e;
  --ds-text-inverse:   #06070a;

  /* ── 顏色：邊框 / 分割線 ──────────────────── */
  --ds-border:         #1e2030;
  --ds-border-hover:   #2a2d45;
  --ds-border-active:  #45a29e;

  /* ── 漸變 ─────────────────────────────────── */
  --ds-gradient-hero:       linear-gradient(160deg, #06070a 0%, #0f1923 40%, #0a1a1a 70%, #06070a 100%);
  --ds-gradient-card:       linear-gradient(145deg, #1a1c2b 0%, #12131e 100%);
  --ds-gradient-accent:     linear-gradient(135deg, #45a29e 0%, #66fcf1 100%);
  --ds-gradient-accent-btn: linear-gradient(135deg, #38897e 0%, #45a29e 50%, #55c5bf 100%);

  /* ── 字體 ─────────────────────────────────── */
  --ds-font-display:  'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --ds-font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --ds-font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── 字號比例 (modular scale ~1.25) ────────── */
  --ds-text-xs:   0.75rem;    /* 12px */
  --ds-text-sm:   0.875rem;   /* 14px */
  --ds-text-base: 1rem;       /* 16px */
  --ds-text-lg:   1.125rem;   /* 18px */
  --ds-text-xl:   1.25rem;    /* 20px */
  --ds-text-2xl:  1.5rem;     /* 24px */
  --ds-text-3xl:  1.875rem;   /* 30px */
  --ds-text-4xl:  2.25rem;    /* 36px */
  --ds-text-5xl:  3rem;       /* 48px */
  --ds-text-6xl:  3.75rem;    /* 60px */
  --ds-text-hero: clamp(2.5rem, 5vw, 4.5rem);

  /* ── 字重 ─────────────────────────────────── */
  --ds-weight-normal:   400;
  --ds-weight-medium:   500;
  --ds-weight-semibold: 600;
  --ds-weight-bold:     700;
  --ds-weight-black:    900;

  /* ── 行高 ─────────────────────────────────── */
  --ds-leading-tight:   1.2;
  --ds-leading-snug:    1.35;
  --ds-leading-normal:  1.6;
  --ds-leading-relaxed: 1.75;

  /* ── 間距比例 ─────────────────────────────── */
  --ds-space-1:  0.25rem;   /* 4px */
  --ds-space-2:  0.5rem;    /* 8px */
  --ds-space-3:  0.75rem;   /* 12px */
  --ds-space-4:  1rem;      /* 16px */
  --ds-space-5:  1.25rem;   /* 20px */
  --ds-space-6:  1.5rem;    /* 24px */
  --ds-space-8:  2rem;      /* 32px */
  --ds-space-10: 2.5rem;    /* 40px */
  --ds-space-12: 3rem;      /* 48px */
  --ds-space-16: 4rem;      /* 64px */
  --ds-space-20: 5rem;      /* 80px */
  --ds-space-24: 6rem;      /* 96px */
  --ds-space-32: 8rem;      /* 128px */

  /* ── 圓角 ─────────────────────────────────── */
  --ds-radius-sm:   4px;
  --ds-radius-md:   8px;
  --ds-radius-lg:   12px;
  --ds-radius-xl:   16px;
  --ds-radius-2xl:  24px;
  --ds-radius-full: 9999px;

  /* ── 陰影 ─────────────────────────────────── */
  --ds-shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --ds-shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --ds-shadow-lg:   0 8px 30px rgba(0,0,0,0.5);
  --ds-shadow-xl:   0 16px 50px rgba(0,0,0,0.6);
  --ds-shadow-glow: 0 0 20px rgba(102, 252, 241, 0.15), 0 0 60px rgba(102, 252, 241, 0.05);
  --ds-shadow-card: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03);

  /* ── 過渡 ─────────────────────────────────── */
  --ds-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 佈局 ─────────────────────────────────── */
  --ds-max-width:    1200px;
  --ds-max-width-lg: 1400px;

  /* ── Z-Index 層級 ─────────────────────────── */
  --ds-z-base:     1;
  --ds-z-dropdown: 10;
  --ds-z-sticky:   20;
  --ds-z-overlay:  30;
  --ds-z-modal:    40;
  --ds-z-toast:    50;
}