/* =============================================
   TOKENS.CSS — Design System Tokens
   AkalApp — Platform Pembelajaran Digital
   ============================================= */

/* ---- Google Fonts are loaded in index.html ---- */

:root {
  /* ================================================
     COLOR PALETTE — Dark Mode (Default)
     ================================================ */

  /* Backgrounds */
  --color-bg:            #0a0e1a;
  --color-bg-card:       #0f1629;
  --color-bg-elevated:   #1a2332;
  --color-bg-surface:    #111827;
  --color-bg-hover:      #1e293b;
  --color-bg-input:      #0d1220;
  --color-bg-overlay:    rgba(0, 0, 0, 0.6);

  /* Text */
  --color-text:          #f1f5f9;
  --color-text-secondary:#94a3b8;
  --color-text-muted:    #64748b;
  --color-text-inverse:  #0a0e1a;

  /* Accent Colors */
  --color-blue:          #3b82f6;
  --color-blue-hover:    #2563eb;
  --color-blue-light:    #60a5fa;
  --color-blue-glow:     rgba(59, 130, 246, 0.35);

  --color-purple:        #8b5cf6;
  --color-purple-hover:  #7c3aed;
  --color-purple-light:  #a78bfa;
  --color-purple-glow:   rgba(139, 92, 246, 0.35);

  --color-cyan:          #06b6d4;
  --color-cyan-hover:    #0891b2;
  --color-cyan-light:    #22d3ee;
  --color-cyan-glow:     rgba(6, 182, 212, 0.35);

  /* Semantic Colors */
  --color-success:       #10b981;
  --color-success-light: #34d399;
  --color-success-glow:  rgba(16, 185, 129, 0.3);

  --color-warning:       #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-glow:  rgba(245, 158, 11, 0.3);

  --color-error:         #ef4444;
  --color-error-light:   #f87171;
  --color-error-glow:    rgba(239, 68, 68, 0.3);

  /* Borders */
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-hover:  rgba(255, 255, 255, 0.15);
  --color-border-focus:  rgba(59, 130, 246, 0.5);
  --color-border-accent: rgba(139, 92, 246, 0.4);

  /* Gradients */
  --gradient-primary:    linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gradient-accent:     linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  --gradient-hero:       linear-gradient(135deg, #0a0e1a 0%, #1a1040 30%, #0f1629 60%, #0a1628 100%);
  --gradient-card:       linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  --gradient-cta:        linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-text:       linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #22d3ee 100%);
  --gradient-glow:       radial-gradient(ellipse at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);

  /* ================================================
     TYPOGRAPHY
     ================================================ */
  --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font Sizes — modular scale */
  --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 */
  --text-7xl:            4.5rem;     /* 72px */

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

  /* Line Heights */
  --leading-tight:       1.2;
  --leading-snug:        1.35;
  --leading-normal:      1.5;
  --leading-relaxed:     1.65;

  /* Letter Spacing */
  --tracking-tight:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.02em;
  --tracking-wider:      0.05em;

  /* ================================================
     SPACING — 4px base scale
     ================================================ */
  --sp-0:    0;
  --sp-px:   1px;
  --sp-0-5:  2px;
  --sp-1:    4px;
  --sp-1-5:  6px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    28px;
  --sp-8:    32px;
  --sp-9:    36px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-14:   56px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-32:   128px;

  /* ================================================
     BORDER RADIUS
     ================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ================================================
     SHADOWS
     ================================================ */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl:      0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-2xl:     0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow-blue:   0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(59, 130, 246, 0.1);
  --shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.1);
  --shadow-glow-cyan:   0 0 20px rgba(6, 182, 212, 0.3), 0 0 40px rgba(6, 182, 212, 0.1);
  --shadow-inner:   inset 0 1px 4px rgba(0, 0, 0, 0.3);

  /* ================================================
     GLASSMORPHISM
     ================================================ */
  --glass-bg:        rgba(15, 22, 41, 0.7);
  --glass-bg-heavy:  rgba(15, 22, 41, 0.85);
  --glass-bg-light:  rgba(15, 22, 41, 0.4);
  --glass-blur:      blur(20px);
  --glass-blur-heavy:blur(40px);
  --glass-border:    1px solid rgba(255, 255, 255, 0.08);

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

  /* ================================================
     Z-INDEX LAYERS
     ================================================ */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-navbar:     500;
  --z-overlay:    900;
  --z-modal:      1000;
  --z-toast:      1100;
  --z-tooltip:    1200;

  /* ================================================
     LAYOUT
     ================================================ */
  --container-max:    1200px;
  --container-narrow: 800px;
  --container-wide:   1400px;
  --navbar-height:    72px;
}

/* ================================================
   LIGHT MODE OVERRIDES
   ================================================ */
[data-theme='light'] {
  /* Backgrounds */
  --color-bg:            #f8fafc;
  --color-bg-card:       #ffffff;
  --color-bg-elevated:   #f1f5f9;
  --color-bg-surface:    #ffffff;
  --color-bg-hover:      #e2e8f0;
  --color-bg-input:      #ffffff;
  --color-bg-overlay:    rgba(0, 0, 0, 0.4);

  /* Text */
  --color-text:          #0f172a;
  --color-text-secondary:#475569;
  --color-text-muted:    #94a3b8;
  --color-text-inverse:  #f1f5f9;

  /* Borders */
  --color-border:        rgba(0, 0, 0, 0.08);
  --color-border-hover:  rgba(0, 0, 0, 0.15);
  --color-border-focus:  rgba(59, 130, 246, 0.5);

  /* Gradients */
  --gradient-hero:       linear-gradient(135deg, #f8fafc 0%, #e0e7ff 30%, #f0f4ff 60%, #f8fafc 100%);
  --gradient-card:       linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);

  /* Shadows — lighter */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl:      0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-2xl:     0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-inner:   inset 0 1px 4px rgba(0, 0, 0, 0.06);

  /* Glassmorphism — light mode */
  --glass-bg:        rgba(255, 255, 255, 0.75);
  --glass-bg-heavy:  rgba(255, 255, 255, 0.9);
  --glass-bg-light:  rgba(255, 255, 255, 0.5);
  --glass-border:    1px solid rgba(0, 0, 0, 0.06);
}