/* tokens.css — Design system tokens (dark blue CP theme) */

:root, [data-theme="dark"] {
  /* === TYPE SCALE === */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* === SPACING === */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* === DARK THEME COLORS (default) === */
  --color-bg:              #0d1117;
  --color-surface:         #111827;
  --color-surface-2:       #1a2332;
  --color-surface-3:       #1f2d3d;
  --color-border:          #2d3748;
  --color-border-subtle:   #1e2a3a;
  --color-divider:         #243044;

  --color-text:            #e2e8f0;
  --color-text-muted:      #94a3b8;
  --color-text-faint:      #4a5568;
  --color-text-inverse:    #0d1117;

  /* Primary — Cyan/Teal */
  --color-primary:         #06b6d4;
  --color-primary-hover:   #0891b2;
  --color-primary-active:  #0e7490;
  --color-primary-dim:     rgba(6,182,212,0.12);
  --color-primary-glow:    rgba(6,182,212,0.25);

  /* Secondary — Purple/Indigo */
  --color-secondary:       #8b5cf6;
  --color-secondary-hover: #7c3aed;
  --color-secondary-dim:   rgba(139,92,246,0.12);
  --color-secondary-glow:  rgba(139,92,246,0.25);

  /* Accent — Amber */
  --color-accent:          #f59e0b;
  --color-accent-hover:    #d97706;
  --color-accent-dim:      rgba(245,158,11,0.15);

  /* Status colors */
  --color-success:         #10b981;
  --color-success-dim:     rgba(16,185,129,0.12);
  --color-error:           #ef4444;
  --color-error-dim:       rgba(239,68,68,0.12);
  --color-warning:         #f59e0b;
  --color-warning-dim:     rgba(245,158,11,0.12);
  --color-info:            #3b82f6;
  --color-info-dim:        rgba(59,130,246,0.12);

  /* CF Category colors */
  --color-cf-rating:   #3b82f6;  /* Blue */
  --color-usaco:       #10b981;  /* Green */
  --color-topic:       #8b5cf6;  /* Purple */
  --color-cses:        #f97316;  /* Orange */
  --color-contest:     #ef4444;  /* Red */
  --color-prayer:      #f59e0b;  /* Amber */
  --color-break:       #64748b;  /* Slate */

  /* === GRADIENTS === */
  --gradient-primary:    linear-gradient(135deg, #06b6d4, #8b5cf6);
  --gradient-hero:       linear-gradient(135deg, #0d1117 0%, #111827 50%, #0d1117 100%);
  --gradient-card:       linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  --gradient-nav-accent: linear-gradient(90deg, #06b6d4, #8b5cf6);

  /* === GLASSMORPHISM === */
  --glass-bg:       rgba(17,24,39,0.7);
  --glass-border:   rgba(255,255,255,0.08);
  --glass-blur:     blur(16px);
  --glass-bg-light: rgba(255,255,255,0.04);

  /* === SHADOWS === */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow-cyan:   0 0 20px rgba(6,182,212,0.3), 0 0 40px rgba(6,182,212,0.1);
  --shadow-glow-purple: 0 0 20px rgba(139,92,246,0.3), 0 0 40px rgba(139,92,246,0.1);

  /* === RADIUS === */
  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem;  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --transition-fast:  150ms cubic-bezier(0.16,1,0.3,1);
  --transition-base:  250ms cubic-bezier(0.16,1,0.3,1);
  --transition-slow:  400ms cubic-bezier(0.16,1,0.3,1);

  /* === FONTS === */
  --font-display: 'Cabinet Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* === LAYOUT === */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --nav-height:      64px;

  /* === LEGACY ALIASES (used by page CSS files) === */
  --text-primary:   var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-muted:     var(--color-text-faint);
}

/* LIGHT THEME */
[data-theme="light"] {
  --color-bg:            #f8fafc;
  --color-surface:       #ffffff;
  --color-surface-2:     #f1f5f9;
  --color-surface-3:     #e2e8f0;
  --color-border:        #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-divider:       #cbd5e1;

  --color-text:          #0f172a;
  --color-text-muted:    #475569;
  --color-text-faint:    #94a3b8;
  --color-text-inverse:  #f8fafc;

  --color-primary:       #0891b2;
  --color-primary-hover: #0e7490;
  --color-primary-dim:   rgba(8,145,178,0.1);
  --color-primary-glow:  rgba(8,145,178,0.2);

  --glass-bg:       rgba(255,255,255,0.75);
  --glass-border:   rgba(0,0,0,0.08);
  --glass-bg-light: rgba(255,255,255,0.5);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.12);
  --shadow-glow-cyan:   0 0 20px rgba(8,145,178,0.2);
  --shadow-glow-purple: 0 0 20px rgba(124,58,237,0.2);

  --text-primary:   var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-muted:     var(--color-text-faint);
}

/* System preference fallback */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:            #f8fafc;
    --color-surface:       #ffffff;
    --color-surface-2:     #f1f5f9;
    --color-surface-3:     #e2e8f0;
    --color-border:        #e2e8f0;
    --color-border-subtle: #f1f5f9;
    --color-divider:       #cbd5e1;
    --color-text:          #0f172a;
    --color-text-muted:    #475569;
    --color-text-faint:    #94a3b8;
    --color-text-inverse:  #f8fafc;
    --color-primary:       #0891b2;
    --color-primary-hover: #0e7490;
    --color-primary-dim:   rgba(8,145,178,0.1);
    --color-primary-glow:  rgba(8,145,178,0.2);
    --glass-bg:       rgba(255,255,255,0.75);
    --glass-border:   rgba(0,0,0,0.08);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.12);
  }
}