/* ============================================
   FocusAgent Design Token System - CSS Variables
   Brand: 智趣专注 | AI + 脑科学 · 儿童专注力训练
   Theme: Deep Space Dark — 多彩深空主题
   ============================================ */

:root {
  /* === Deep Space Background System === */
  --space-void:      #030712;
  --space-deep:      #0a1128;
  --space-mid:       #111827;
  --space-surface:   #1a2332;
  --space-elevated:  #243044;
  --space-overlay:   rgba(3, 7, 18, 0.85);

  /* === Primary Color System — Teal/Cyan (NOT plain blue) === */
  --cyan-50:  #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;

  /* Primary alias */
  --brand-primary-50:  var(--cyan-50);
  --brand-primary-100: var(--cyan-100);
  --brand-primary-200: var(--cyan-200);
  --brand-primary-300: var(--cyan-300);
  --brand-primary-400: var(--cyan-400);
  --brand-primary-500: var(--cyan-500);
  --brand-primary-600: var(--cyan-600);
  --brand-primary-700: var(--cyan-700);
  --brand-primary-800: var(--cyan-800);
  --brand-primary-900: var(--cyan-900);

  /* === Accent Color System — Warm Amber/Gold === */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;

  --brand-accent-50:  var(--amber-50);
  --brand-accent-100: var(--amber-100);
  --brand-accent-200: var(--amber-200);
  --brand-accent-300: var(--amber-300);
  --brand-accent-400: var(--amber-400);
  --brand-accent-500: var(--amber-500);
  --brand-accent-600: var(--amber-600);
  --brand-accent-700: var(--amber-700);

  /* === Secondary Accent — Emerald Green === */
  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;

  /* === Role-Specific Colors (dark-adapted) === */
  /* Student — Teal/Cyan */
  --student-50:  var(--cyan-50);
  --student-100: var(--cyan-100);
  --student-200: var(--cyan-200);
  --student-300: var(--cyan-300);
  --student-400: var(--cyan-400);
  --student-500: var(--cyan-500);
  --student-600: var(--cyan-600);

  /* Parent — Emerald */
  --parent-50:  var(--emerald-50);
  --parent-100: var(--emerald-100);
  --parent-200: var(--emerald-200);
  --parent-300: var(--emerald-300);
  --parent-400: var(--emerald-400);
  --parent-500: var(--emerald-500);
  --parent-600: var(--emerald-600);

  /* Teacher — Warm Rose (replacing indigo to avoid blue-purple) */
  --teacher-50:  #fff1f2;
  --teacher-100: #ffe4e6;
  --teacher-200: #fecdd3;
  --teacher-300: #fda4af;
  --teacher-400: #fb7185;
  --teacher-500: #f43f5e;
  --teacher-600: #e11d48;

  /* === Status Colors (dark-adapted) === */
  --status-success-500: #10b981;
  --status-success-glow: rgba(16, 185, 129, 0.4);
  --status-warning-500: #f59e0b;
  --status-warning-glow: rgba(245, 158, 11, 0.4);
  --status-error-500:   #ef4444;
  --status-error-glow:  rgba(239, 68, 68, 0.4);
  --status-info-500:    #06b6d4;
  --status-info-glow:   rgba(6, 182, 212, 0.4);

  /* === Neutral Scale (dark-first, cool tint) === */
  --neutral-0:   #030712;
  --neutral-50:  #0a1128;
  --neutral-100: #111827;
  --neutral-200: #1e293b;
  --neutral-300: #334155;
  --neutral-400: #475569;
  --neutral-500: #64748b;
  --neutral-600: #94a3b8;
  --neutral-700: #cbd5e1;
  --neutral-800: #e2e8f0;
  --neutral-900: #f1f5f9;

  /* Text colors for dark theme */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-inverse:   #030712;

  /* === Radius System === */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* === Spacing System (8px grid) === */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* === Typography === */
  --font-display: 'Outfit', 'Noto Sans SC', system-ui, sans-serif;
  --font-ui:      'Outfit', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes — Major Third (1.25) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  /* Font Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Font Awesome Icon Sizes */
  --icon-xs:  0.75rem;   /* 12px */
  --icon-sm:  0.875rem;  /* 14px */
  --icon-md:  1rem;      /* 16px */
  --icon-lg:  1.25rem;   /* 20px */
  --icon-xl:  1.5rem;    /* 24px */
  --icon-2xl: 2rem;      /* 32px */

  /* === Shadow System (dark theme — depth + glow) === */
  --shadow-sm:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 20px 48px rgba(0, 0, 0, 0.4);
  --shadow-xl:
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 32px 64px rgba(0, 0, 0, 0.5);

  /* Glow shadows */
  --shadow-cyan-glow:
    0 0 20px rgba(6, 182, 212, 0.25),
    0 0 40px rgba(6, 182, 212, 0.1);
  --shadow-amber-glow:
    0 0 20px rgba(245, 158, 11, 0.25),
    0 0 40px rgba(245, 158, 11, 0.1);
  --shadow-emerald-glow:
    0 0 20px rgba(16, 185, 129, 0.25),
    0 0 40px rgba(16, 185, 129, 0.1);
  --shadow-rose-glow:
    0 0 20px rgba(244, 63, 94, 0.25),
    0 0 40px rgba(244, 63, 94, 0.1);

  /* === Gradient Definitions — Space Themed === */
  /* Nebula: deep space with cyan/teal wisps */
  --gradient-nebula:
    radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #030712 0%, #0a1128 50%, #111827 100%);

  /* Aurora: flowing color bands */
  --gradient-aurora:
    linear-gradient(135deg,
      rgba(6, 182, 212, 0.2) 0%,
      rgba(16, 185, 129, 0.15) 25%,
      rgba(245, 158, 11, 0.1) 50%,
      rgba(244, 63, 94, 0.08) 75%,
      rgba(6, 182, 212, 0.15) 100%);

  /* Cosmic: brand gradient for CTAs */
  --gradient-cosmic:
    linear-gradient(135deg,
      #06b6d4 0%,
      #0891b2 40%,
      #0e7490 100%);

  /* Cosmic hover: lighter variant */
  --gradient-cosmic-hover:
    linear-gradient(135deg,
      #22d3ee 0%,
      #06b6d4 40%,
      #0891b2 100%);

  /* Warm energy: amber to rose */
  --gradient-energy:
    linear-gradient(135deg,
      #fbbf24 0%,
      #f59e0b 40%,
      #d97706 100%);

  /* Success: emerald flow */
  --gradient-success:
    linear-gradient(135deg,
      #34d399 0%,
      #10b981 50%,
      #059669 100%);

  /* Hero: deep space background */
  --gradient-hero:
    radial-gradient(ellipse at 30% 20%, rgba(6, 182, 212, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #030712 0%, #0a1128 40%, #111827 100%);

  /* Mesh: subtle multi-point radial */
  --gradient-mesh:
    radial-gradient(at 20% 20%, rgba(6, 182, 212, 0.1) 0px, transparent 50%),
    radial-gradient(at 80% 10%, rgba(245, 158, 11, 0.06) 0px, transparent 50%),
    radial-gradient(at 10% 70%, rgba(16, 185, 129, 0.06) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(244, 63, 94, 0.04) 0px, transparent 50%);

  /* Card surface gradient */
  --gradient-card:
    linear-gradient(135deg,
      rgba(15, 23, 42, 0.9) 0%,
      rgba(26, 35, 50, 0.8) 100%);

  /* === Glass Effect (dark theme) === */
  --glass-bg:       rgba(15, 23, 42, 0.7);
  --glass-bg-hover: rgba(15, 23, 42, 0.85);
  --glass-border:   rgba(148, 163, 184, 0.1);
  --glass-border-hover: rgba(148, 163, 184, 0.2);
  --glass-blur:     blur(20px);
  --glass-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(148, 163, 184, 0.06);

  /* Glass variant borders (glow) */
  --glass-border-cyan:    rgba(6, 182, 212, 0.25);
  --glass-border-amber:   rgba(245, 158, 11, 0.25);
  --glass-border-emerald: rgba(16, 185, 129, 0.25);
  --glass-border-rose:    rgba(244, 63, 94, 0.25);

  /* === Glow Effects === */
  --glow-cyan:    0 0 20px rgba(6, 182, 212, 0.3), 0 0 60px rgba(6, 182, 212, 0.1);
  --glow-amber:   0 0 20px rgba(245, 158, 11, 0.3), 0 0 60px rgba(245, 158, 11, 0.1);
  --glow-emerald: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 60px rgba(16, 185, 129, 0.1);
  --glow-rose:    0 0 20px rgba(244, 63, 94, 0.3), 0 0 60px rgba(244, 63, 94, 0.1);
  --glow-intense-cyan:
    0 0 10px rgba(6, 182, 212, 0.5),
    0 0 30px rgba(6, 182, 212, 0.3),
    0 0 60px rgba(6, 182, 212, 0.15);

  /* === Transition System (elastic curves) === */
  --ease-elastic:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast:    150ms var(--ease-elastic);
  --transition-base:    250ms var(--ease-elastic);
  --transition-slow:    400ms var(--ease-elastic);
  --transition-spring:  500ms var(--ease-bounce);
  --transition-glow:    300ms var(--ease-elastic);

  /* ===== Micro-interaction Tokens ===== */
  --hover-scale: 1.02;
  --hover-scale-lg: 1.05;
  --hover-scale-sm: 1.01;
  --press-scale: 0.97;
  --press-scale-lg: 0.94;
  --hover-lift: -2px;
  --hover-lift-lg: -4px;
  --hover-glow-spread: 20px;
  --hover-glow-opacity: 0.2;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ===== Stagger Delay Tokens ===== */
  --stagger-delay-1: 0.05s;
  --stagger-delay-2: 0.1s;
  --stagger-delay-3: 0.15s;
  --stagger-delay-4: 0.2s;
  --stagger-delay-5: 0.25s;
  --stagger-delay-6: 0.3s;
  --stagger-delay-7: 0.35s;
  --stagger-delay-8: 0.4s;
  --stagger-delay-9: 0.45s;
  --stagger-delay-10: 0.5s;
  --stagger-delay-11: 0.55s;
  --stagger-delay-12: 0.6s;

  /* ===== Ripple Effect Tokens ===== */
  --ripple-color: rgba(6, 182, 212, 0.3);
  --ripple-duration: 0.6s;
  --ripple-scale: 4;

  /* ===== Skeleton Tokens ===== */
  --skeleton-base: var(--neutral-800);
  --skeleton-shine: var(--neutral-700);
  --skeleton-duration: 1.5s;
  --skeleton-radius: var(--radius-md);

  /* === Z-index Layers === */
  --z-base:            0;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          300;
  --z-modal-backdrop: 400;
  --z-modal:          500;
  --z-popover:        600;
  --z-tooltip:        700;
  --z-toast:          800;

  /* === Card Variant Colors === */
  --card-cyan-bg:     rgba(6, 182, 212, 0.08);
  --card-cyan-border: rgba(6, 182, 212, 0.2);
  --card-amber-bg:    rgba(245, 158, 11, 0.08);
  --card-amber-border:rgba(245, 158, 11, 0.2);
  --card-emerald-bg:  rgba(16, 185, 129, 0.08);
  --card-emerald-border:rgba(16, 185, 129, 0.2);
  --card-rose-bg:     rgba(244, 63, 94, 0.08);
  --card-rose-border: rgba(244, 63, 94, 0.2);

  /* === Progress Bar Colors === */
  --progress-cyan:    linear-gradient(90deg, #0891b2, #06b6d4, #22d3ee);
  --progress-amber:   linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
  --progress-emerald: linear-gradient(90deg, #059669, #10b981, #34d399);
  --progress-rose:    linear-gradient(90deg, #e11d48, #f43f5e, #fb7185);

  /* === Badge / Achievement Colors === */
  --badge-gold-bg:       rgba(251, 191, 36, 0.15);
  --badge-gold-border:   rgba(251, 191, 36, 0.4);
  --badge-gold-text:     #fbbf24;
  --badge-silver-bg:     rgba(148, 163, 184, 0.15);
  --badge-silver-border: rgba(148, 163, 184, 0.4);
  --badge-silver-text:   #94a3b8;
  --badge-bronze-bg:     rgba(180, 83, 9, 0.15);
  --badge-bronze-border: rgba(180, 83, 9, 0.4);
  --badge-bronze-text:   #d97706;
  --badge-special-bg:    rgba(6, 182, 212, 0.15);
  --badge-special-border:rgba(6, 182, 212, 0.4);
  --badge-special-text:  #22d3ee;

  /* === Training Node States === */
  --node-completed-bg:    rgba(16, 185, 129, 0.15);
  --node-completed-border:rgba(16, 185, 129, 0.5);
  --node-current-bg:      rgba(6, 182, 212, 0.15);
  --node-current-border:  rgba(6, 182, 212, 0.5);
  --node-locked-bg:       rgba(100, 116, 139, 0.1);
  --node-locked-border:   rgba(100, 116, 139, 0.2);

  /* === Responsive Breakpoints === */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}