/* ==========================================================================
   css/variables.css — Dritrez Solutions Global Design Token System
   ========================================================================== */

:root {

  /* ─── COLOR: Brand Primaries ─────────────────────────────────────────── */
  --primary:            #38bdf8;   /* sky-400 — professional, not neon */
  --primary-dim:        #0ea5e9;   /* sky-500 */
  --primary-glow:       rgba(56, 189, 248, 0.10);   /* reduced from 0.15 */
  --primary-glow-sm:    rgba(56, 189, 248, 0.06);

  --secondary:          #2563eb;   /* blue-600 — enterprise blue */
  --secondary-glow:     rgba(37, 99, 235, 0.10);

  --accent:             #6366f1;   /* indigo-500 — refined, not purple-neon */
  --accent-glow:        rgba(99, 102, 241, 0.10);
  --accent-warm:        #d97706;   /* amber-600 — premium gold */

  /* ─── COLOR: Dark Surfaces ───────────────────────────────────────────── */
  --dark-bg:            #050a14;
  --dark-surface:       #080f1e;
  --dark-elevated:      #0a1424;
  --card-bg:            #0b1221;
  --card-bg-hover:      #0f1929;
  --card-border:        rgba(56, 189, 248, 0.07);
  --card-border-hover:  rgba(56, 189, 248, 0.22);

  --glass-border:       rgba(255, 255, 255, 0.07);
  --glass-border-hover: rgba(56, 189, 248, 0.20);

  /* ─── COLOR: Semantics ───────────────────────────────────────────────── */
  --success:            #10b981;
  --success-glow:       rgba(16, 185, 129, 0.15);
  --error:              #ef4444;
  --error-glow:         rgba(239, 68, 68, 0.12);
  --warning:            #f59e0b;

  /* ─── COLOR: Text Hierarchy ──────────────────────────────────────────── */
  --text-main:          #e0e6ed;
  --text-muted:         #6b7fa3;
  --text-subtle:        #3d4f6e;
  --text-white:         #ffffff;
  --text-inverse:       #050a14;

  /* ─── GLASS: Glassmorphism Tokens ────────────────────────────────────── */
  --glass-bg:           rgba(8, 15, 30, 0.72);
  --glass-bg-light:     rgba(255, 255, 255, 0.03);
  --glass-border:       rgba(255, 255, 255, 0.07);
  --glass-border-hover: rgba(0, 243, 255, 0.22);
  --glass-blur:         blur(18px);
  --glass-blur-sm:      blur(10px);

  /* ─── TYPOGRAPHY: Font Stacks ────────────────────────────────────────── */
  --font-body:          'Inter', system-ui, -apple-system, sans-serif;
  --font-heading:       'Inter', system-ui, -apple-system, sans-serif; /* enterprise: clean sans-serif */
  --font-brand:         'Orbitron', 'Inter', sans-serif;               /* logo/brand mark only */
  --font-mono:          'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* ─── TYPOGRAPHY: Fluid Scale (clamp: min, preferred, max) ──────────── */
  --text-xs:    clamp(0.6875rem,  0.65rem + 0.2vw,  0.75rem);
  --text-sm:    clamp(0.8125rem,  0.78rem + 0.2vw,  0.875rem);
  --text-base:  clamp(1rem,       0.96rem + 0.2vw,  1.0625rem);
  --text-lg:    clamp(1.1rem,     1.0rem  + 0.5vw,  1.25rem);
  --text-xl:    clamp(1.25rem,    1.1rem  + 0.75vw, 1.5rem);
  --text-2xl:   clamp(1.5rem,     1.3rem  + 1vw,    2rem);
  --text-3xl:   clamp(1.875rem,   1.5rem  + 1.5vw,  2.5rem);
  --text-4xl:   clamp(2.25rem,    1.75rem + 2vw,    3.25rem);
  --text-5xl:   clamp(2.75rem,    2rem    + 2.5vw,  4rem);
  --text-6xl:   clamp(3.25rem,    2.5rem  + 3vw,    5rem);

  /* ─── SPACING: 4px-base Scale ───────────────────────────────────────── */
  --space-1:    0.25rem;   /* 4px  */
  --space-2:    0.5rem;    /* 8px  */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-7:    1.75rem;   /* 28px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-28:   7rem;      /* 112px */
  --space-32:   8rem;      /* 128px */

  /* ─── RADII ──────────────────────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─── SHADOWS ─────────────────────────────────────────────────────────── */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:     0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:     0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow:   0 0 24px rgba(0, 243, 255, 0.2);
  --shadow-glow-sm:0 0 12px rgba(0, 243, 255, 0.15);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 243, 255, 0.05);
  --shadow-float:  0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 243, 255, 0.08);

  /* ─── TRANSITIONS ────────────────────────────────────────────────────── */
  --transition-fast:   0.15s ease-out;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-spring: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  /* ─── Z-INDEX HIERARCHY ──────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ─── LAYOUT ─────────────────────────────────────────────────────────── */
  --container-max:     1280px;
  --container-narrow:  900px;
  --container-wide:    1440px;
  --navbar-h:          72px;
  --section-gap:       clamp(4rem, 8vw, 8rem);

}