/* ============================================================
   AGI DeFi Platform — Design System Variables
   ============================================================ */

:root {
  /* ── Primary Color System ── */
  --c-primary: #FF6B2B;
  --c-primary-dark: #D4551E;
  --c-primary-light: #FF8C5A;
  --c-primary-glow: rgba(255, 107, 43, 0.35);
  --c-secondary: #FFB800;
  --c-accent: #FF4500;

  /* ── Background Layers ── */
  --c-bg-base: #0A0C12;
  --c-bg-deep: #0D0F16;
  --c-bg-card: rgba(20, 24, 36, 0.92);
  --c-bg-surface: #1A1F2E;
  --c-bg-input: rgba(30, 36, 52, 0.80);
  --c-bg-overlay: rgba(10, 12, 18, 0.85);

  /* ── Typography Colors ── */
  --c-text-primary: #FFFFFF;
  --c-text-secondary: #A0AABA;
  --c-text-muted: #5A6070;
  --c-text-highlight: #FFB800;

  /* ── Borders ── */
  --c-border: rgba(255, 107, 43, 0.20);
  --c-border-hover: rgba(255, 107, 43, 0.50);
  --c-border-active: rgba(255, 107, 43, 0.80);
  --c-border-subtle: rgba(255, 255, 255, 0.06);

  /* ── Shadows & Glow ── */
  --shadow-glow-xs: 0 0 8px  rgba(255, 107, 43, 0.20);
  --shadow-glow-sm: 0 0 16px rgba(255, 107, 43, 0.30);
  --shadow-glow-md: 0 0 32px rgba(255, 107, 43, 0.40);
  --shadow-glow-lg: 0 0 64px rgba(255, 107, 43, 0.50);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.40);
  --shadow-deep:    0 8px 40px rgba(0, 0, 0, 0.60);

  /* ── Status Colors ── */
  --c-success:    #10B981;
  --c-success-bg: rgba(16, 185, 129, 0.12);
  --c-warning:    #F59E0B;
  --c-warning-bg: rgba(245, 158, 11, 0.12);
  --c-danger:     #EF4444;
  --c-danger-bg:  rgba(239, 68, 68, 0.12);
  --c-info:       #3B82F6;
  --c-info-bg:    rgba(59, 130, 246, 0.12);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #FF6B2B 0%, #FF8C00 100%);
  --gradient-gold:    linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
  --gradient-card:    linear-gradient(135deg, rgba(255,107,43,0.06) 0%, rgba(255,184,0,0.03) 100%);
  --gradient-hero:    radial-gradient(ellipse at 50% -10%, rgba(255,107,43,0.18) 0%, transparent 65%);
  --gradient-bg:      linear-gradient(160deg, #0A0C12 0%, #0F1220 50%, #0A0C12 100%);

  /* ── Spacing ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Border Radius ── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── Typography ── */
  --font-sans: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data: 'Inter', 'SF Mono', 'Fira Code', monospace;

  /* ── Font Sizes (Mobile First) ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  34px;
  --text-5xl:  44px;

  /* ── Transitions ── */
  --t-fast:   all 0.15s ease;
  --t-base:   all 0.25s ease;
  --t-slow:   all 0.40s ease;
  --t-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Stack ── */
  --z-base:         1;
  --z-dropdown:    50;
  --z-fixed:      100;
  --z-bottom-nav: 100;
  --z-header:     100;
  --z-bottom-sheet: 150;
  --z-modal:      200;
  --z-toast:      300;
  --z-loading:    999;

  /* ── Layout ── */
  --header-h:      56px;
  --bottom-nav-h:  64px;
  --max-width:     1200px;
  --page-px:       16px;
  --card-gap:      12px;

  /* ── Shorthand Aliases（向後相容）── */
  --c-bg:      #0A0C12;         /* alias → --c-bg-base   */
  --c-surface: #1A1F2E;         /* alias → --c-bg-surface */
  --c-text:    #FFFFFF;         /* alias → --c-text-primary */
}

/* ── Desktop Overrides ── */
@media (min-width: 768px) {
  :root {
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  26px;
    --text-3xl:  32px;
    --text-4xl:  40px;
    --text-5xl:  52px;
    --header-h:  64px;
    --page-px:   24px;
    --card-gap:  16px;
  }
}