/* =====================================================
 * DecryptCode INC — Design Tokens
 * Neural Grid Design System
 * All CSS custom properties (colors, typography, spacing, shadows)
 * Last Updated: February 21, 2026
 * ===================================================== */

:root {
  /* ── Backgrounds ── */
  --bg-primary:      #0b0d14;
  --bg-secondary:    #111827;
  --bg-tertiary:     #1e293b;
  --bg-code:         #1e2235;
  --bg-elevated:     #283044;

  /* ── Section Backgrounds (alternating tints) ── */
  --bg-section-indigo:  #0a0c17;
  --bg-section-slate:   #0d1019;
  --bg-section-cyan:    #090d15;
  --bg-section-amber:   #0e0d12;
  --bg-section-deep:    #07090f;
  --bg-section-warm:    #100e14;

  /* ── Brand: Primary (Amber) ── */
  --accent-primary:  #faaf52;
  --accent-hover:    #ffc273;
  --accent-muted:    rgba(250, 175, 82, 0.12);
  --accent-border:   rgba(250, 175, 82, 0.25);
  --accent-glow:     rgba(250, 175, 82, 0.15);

  /* ── Brand: Secondary (Indigo/Violet) ── */
  --accent-2:        #818cf8;
  --accent-2-hover:  #a5b4fc;
  --accent-2-muted:  rgba(129, 140, 248, 0.12);
  --accent-2-border: rgba(129, 140, 248, 0.25);
  --accent-2-glow:   rgba(129, 140, 248, 0.15);

  /* ── Brand: Tertiary (Cyan) ── */
  --accent-3:        #22d3ee;
  --accent-3-hover:  #67e8f9;
  --accent-3-muted:  rgba(34, 211, 238, 0.10);
  --accent-3-border: rgba(34, 211, 238, 0.25);

  /* ── Gradients ── */
  --gradient-brand:     linear-gradient(135deg, var(--accent-primary), #f97316, #ec4899);
  --gradient-hero:      linear-gradient(135deg, rgba(129, 140, 248, 0.15), rgba(250, 175, 82, 0.10), rgba(34, 211, 238, 0.08));
  --gradient-card:      linear-gradient(145deg, var(--bg-secondary) 0%, rgba(129, 140, 248, 0.06) 100%);
  --gradient-border:    linear-gradient(135deg, rgba(250,175,82,0.4), rgba(129,140,248,0.3), rgba(34,211,238,0.3));
  --gradient-text:      linear-gradient(135deg, #faaf52 0%, #f97316 40%, #ec4899 70%, #818cf8 100%);
  --gradient-glow:      radial-gradient(circle at 50% 0%, rgba(129, 140, 248, 0.12) 0%, transparent 60%);
  --gradient-section:   linear-gradient(180deg, rgba(129, 140, 248, 0.04) 0%, transparent 40%, transparent 60%, rgba(34, 211, 238, 0.03) 100%);

  /* ── Text ── */
  --text-primary:    #f1f5f9;
  --text-secondary:  #94a3b8;
  --text-tertiary:   #64748b;
  --text-accent:     #faaf52;
  --text-inverse:    #0b0d14;

  /* ── Semantic ── */
  --success:         #34d399;
  --success-muted:   rgba(52, 211, 153, 0.12);
  --warning:         #fbbf24;
  --warning-muted:   rgba(251, 191, 36, 0.12);
  --error:           #f87171;
  --error-muted:     rgba(248, 113, 113, 0.12);
  --info:            #60a5fa;
  --info-muted:      rgba(96, 165, 250, 0.12);

  /* ── Borders ── */
  --border-subtle:   rgba(148, 163, 184, 0.08);
  --border-default:  rgba(148, 163, 184, 0.12);
  --border-strong:   rgba(148, 163, 184, 0.20);

  /* ── Grid Lines (Neural Grid background) ── */
  --grid-line:       rgba(129, 140, 248, 0.04);
  --grid-node:       rgba(129, 140, 248, 0.12);

  /* ── Font Families ── */
  --font-display:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Font Sizes (fluid, clamp-based) ── */
  --text-xs:         clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm:         clamp(0.8125rem, 0.75rem + 0.3125vw, 0.875rem);
  --text-base:       clamp(0.9375rem, 0.875rem + 0.3125vw, 1rem);
  --text-lg:         clamp(1.0625rem, 0.95rem + 0.5625vw, 1.25rem);
  --text-xl:         clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:        clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl:        clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl:        clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --text-hero:       clamp(2.75rem, 2rem + 3.75vw, 4.5rem);

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

  /* ── Line Heights ── */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ── Letter Spacing ── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.06em;
  --tracking-mono:   -0.02em;

  /* ── 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;
  --space-32:  8rem;

  /* ── Container Widths ── */
  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1200px;
  --container-2xl:   1400px;

  /* ── Border Radius ── */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-full:     9999px;

  /* ── Shadows ── */
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:       0 8px 30px rgba(0, 0, 0, 0.6);
  --shadow-glow:     0 0 24px rgba(129, 140, 248, 0.15), 0 0 8px rgba(250, 175, 82, 0.10);
  --shadow-card:     0 2px 8px rgba(0, 0, 0, 0.4), 0 0 1px rgba(148, 163, 184, 0.08);
  --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 1px rgba(129, 140, 248, 0.15);

  /* ── Glass / Backdrop ── */
  --backdrop-blur:   blur(16px);
  --glass-bg:        rgba(11, 13, 20, 0.80);

  /* ── Transitions ── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-skip-link:  10000;
}