/* ============================================================
   DESIGN TOKENS — VisionForge Technologies
   Single source of truth for all CSS custom properties.
   DO NOT use raw values outside this file.
   ============================================================ */

:root {

  /* ─────────────────────────────────────────────
     BRAND COLORS
  ───────────────────────────────────────────── */
  --color-brand-primary:      #1B8EF8;
  --color-brand-dark:         #0E72D4;
  --color-brand-darker:       #0A5BAB;
  --color-brand-light:        #4DAAFF;
  --color-brand-lighter:      #8ECAFF;
  --color-brand-faint:        rgba(27, 142, 248, 0.08);
  --color-brand-subtle:       rgba(27, 142, 248, 0.15);
  --color-brand-glow:         rgba(27, 142, 248, 0.35);

  /* ─────────────────────────────────────────────
     BACKGROUND COLORS
  ───────────────────────────────────────────── */
  --color-bg-base:            #070E1A;
  --color-bg-surface:         #0D1829;
  --color-bg-elevated:        #132033;
  --color-bg-raised:          #192B42;
  --color-bg-overlay:         rgba(7, 14, 26, 0.92);
  --color-bg-scrim:           rgba(0, 0, 0, 0.70);

  /* ─────────────────────────────────────────────
     BORDER COLORS
  ───────────────────────────────────────────── */
  --color-border-faint:       rgba(255, 255, 255, 0.04);
  --color-border-subtle:      rgba(255, 255, 255, 0.06);
  --color-border-default:     rgba(255, 255, 255, 0.10);
  --color-border-strong:      rgba(255, 255, 255, 0.18);
  --color-border-brand:       rgba(27, 142, 248, 0.35);
  --color-border-brand-strong:rgba(27, 142, 248, 0.55);

  /* ─────────────────────────────────────────────
     TEXT COLORS
  ───────────────────────────────────────────── */
  --color-text-primary:       #FFFFFF;
  --color-text-secondary:     rgba(255, 255, 255, 0.70);
  --color-text-tertiary:      rgba(255, 255, 255, 0.45);
  --color-text-muted:         rgba(255, 255, 255, 0.28);
  --color-text-disabled:      rgba(255, 255, 255, 0.18);
  --color-text-brand:         #1B8EF8;
  --color-text-brand-light:   #4DAAFF;
  --color-text-inverse:       #070E1A;

  /* ─────────────────────────────────────────────
     SEMANTIC COLORS
  ───────────────────────────────────────────── */
  --color-success:            #22C55E;
  --color-success-bg:         rgba(34, 197, 94, 0.10);
  --color-warning:            #F59E0B;
  --color-warning-bg:         rgba(245, 158, 11, 0.10);
  --color-error:              #EF4444;
  --color-error-bg:           rgba(239, 68, 68, 0.10);
  --color-info:               #1B8EF8;
  --color-info-bg:            rgba(27, 142, 248, 0.10);

  /* ─────────────────────────────────────────────
     SECONDARY ACCENT (VIOLET) — background glows only
  ───────────────────────────────────────────── */
  --color-accent-violet:      #603CDC;
  --color-accent-violet-light:#8B5CF6;
  --color-accent-violet-faint:rgba(96, 60, 220, 0.08);
  --color-accent-violet-glow: rgba(96, 60, 220, 0.10);

  /* ─────────────────────────────────────────────
     GRADIENTS
  ───────────────────────────────────────────── */
  --gradient-brand:           linear-gradient(135deg, #1B8EF8 0%, #0E72D4 100%);
  --gradient-brand-subtle:    linear-gradient(135deg, rgba(27,142,248,0.15) 0%, rgba(14,114,212,0.05) 100%);
  --gradient-brand-vertical:  linear-gradient(180deg, #1B8EF8 0%, #0A5BAB 100%);
  --gradient-surface:         linear-gradient(180deg, #0D1829 0%, #070E1A 100%);
  --gradient-surface-up:      linear-gradient(0deg, #0D1829 0%, #070E1A 100%);
  --gradient-glow:            radial-gradient(circle at 50% 0%, rgba(27,142,248,0.18) 0%, transparent 65%);
  --gradient-hero-bg:         radial-gradient(ellipse 80% 60% at 50% -10%, rgba(27,142,248,0.16) 0%, transparent 65%);
  --gradient-card:            linear-gradient(135deg, rgba(19,32,51,1) 0%, rgba(13,24,41,0.6) 100%);
  --gradient-text-brand:      linear-gradient(135deg, #4DAAFF 0%, #1B8EF8 50%, #0E72D4 100%);
  --gradient-fade-down:       linear-gradient(180deg, transparent 0%, rgba(7,14,26,0.95) 100%);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — FONT FAMILIES
  ───────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;
  --font-heading: 'Manrope', var(--font-sans);
  --font-body:    var(--font-sans);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — FONT SIZES (fluid clamp values)
  ───────────────────────────────────────────── */
  --text-2xs:     clamp(0.625rem, 0.60rem + 0.12vw, 0.6875rem);
  --text-xs:      clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);
  --text-sm:      clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
  --text-base:    clamp(0.9375rem, 0.90rem + 0.20vw, 1rem);
  --text-md:      clamp(1.0625rem, 1.00rem + 0.25vw, 1.125rem);
  --text-lg:      clamp(1.125rem,  1.05rem + 0.38vw, 1.25rem);
  --text-xl:      clamp(1.25rem,   1.15rem + 0.50vw, 1.5rem);
  --text-2xl:     clamp(1.5rem,    1.30rem + 1.00vw, 1.875rem);
  --text-3xl:     clamp(1.75rem,   1.45rem + 1.50vw, 2.25rem);
  --text-4xl:     clamp(2.00rem,   1.55rem + 2.25vw, 3.00rem);
  --text-5xl:     clamp(2.50rem,   1.85rem + 3.25vw, 3.75rem);
  --text-6xl:     clamp(3.00rem,   2.10rem + 4.50vw, 4.50rem);
  --text-7xl:     clamp(3.50rem,   2.40rem + 5.50vw, 5.50rem);
  --text-8xl:     clamp(4.00rem,   2.70rem + 6.50vw, 6.50rem);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — FONT WEIGHTS
  ───────────────────────────────────────────── */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — LINE HEIGHTS
  ───────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — LETTER SPACING
  ───────────────────────────────────────────── */
  --tracking-tightest: -0.05em;
  --tracking-tight:    -0.03em;
  --tracking-snug:     -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;

  /* ─────────────────────────────────────────────
     SPACING SCALE (base: 8px)
  ───────────────────────────────────────────── */
  --space-0:    0px;
  --space-0-5:  4px;
  --space-1:    8px;
  --space-1-5:  12px;
  --space-2:    16px;
  --space-2-5:  20px;
  --space-3:    24px;
  --space-3-5:  28px;
  --space-4:    32px;
  --space-5:    40px;
  --space-6:    48px;
  --space-7:    56px;
  --space-8:    64px;
  --space-9:    72px;
  --space-10:   80px;
  --space-11:   88px;
  --space-12:   96px;
  --space-14:   112px;
  --space-16:   128px;
  --space-20:   160px;
  --space-24:   192px;
  --space-32:   256px;
  --space-40:   320px;

  /* ─────────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────────── */
  --radius-none:  0px;
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   28px;
  --radius-4xl:   36px;
  --radius-full:  9999px;

  /* ─────────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────────── */
  --shadow-none:    none;
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.50);
  --shadow-2xl:     0 28px 72px rgba(0, 0, 0, 0.60);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-inset-sm:inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* Glow shadows */
  --shadow-glow-xs: 0 0 8px  rgba(27, 142, 248, 0.20);
  --shadow-glow-sm: 0 0 16px rgba(27, 142, 248, 0.28);
  --shadow-glow-md: 0 0 28px rgba(27, 142, 248, 0.38);
  --shadow-glow-lg: 0 0 48px rgba(27, 142, 248, 0.45);
  --shadow-glow-xl: 0 0 80px rgba(27, 142, 248, 0.40);

  /* ─────────────────────────────────────────────
     ANIMATION DURATIONS
  ───────────────────────────────────────────── */
  --duration-instant:   50ms;
  --duration-fast:      100ms;
  --duration-quick:     150ms;
  --duration-normal:    200ms;
  --duration-moderate:  300ms;
  --duration-slow:      500ms;
  --duration-slower:    700ms;
  --duration-slowest:   1000ms;

  /* ─────────────────────────────────────────────
     ANIMATION EASINGS
  ───────────────────────────────────────────── */
  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic:   cubic-bezier(0.68, -0.60, 0.32, 1.60);
  --ease-smooth:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ─────────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────────── */
  --container-max:      1280px;
  --container-pad:      clamp(1rem, 5vw, 5rem);
  --section-pad-y:      clamp(var(--space-10), 10vw, var(--space-20));
  --section-pad-y-sm:   clamp(var(--space-8),  8vw,  var(--space-16));

  /* ─────────────────────────────────────────────
     BREAKPOINTS (reference only — use in @media)
     xs: 0px | sm: 480px | md: 768px
     lg: 1024px | xl: 1280px | 2xl: 1536px
  ───────────────────────────────────────────── */

  /* ─────────────────────────────────────────────
     Z-INDEX SCALE
  ───────────────────────────────────────────── */
  --z-below:      -1;
  --z-base:        0;
  --z-raised:      10;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-header:      200;
  --z-overlay:     300;
  --z-modal:       400;
  --z-toast:       500;
  --z-tooltip:     600;
  --z-loader:      1000;

  /* ─────────────────────────────────────────────
     COMPONENT TOKENS — HEADER
  ───────────────────────────────────────────── */
  --header-height:        64px;
  --header-top-offset:    12px;
  --header-bg:            rgba(9, 18, 36, 0.85);
  --header-border:        rgba(255, 255, 255, 0.10);
  --header-radius:        var(--radius-lg);
  --header-blur:          blur(24px) saturate(180%);

  /* ─────────────────────────────────────────────
     COMPONENT TOKENS — BUTTONS
  ───────────────────────────────────────────── */
  --btn-radius:       var(--radius-md);
  --btn-font-weight:  var(--font-semibold);
  --btn-transition:   all var(--duration-normal) var(--ease-out);
  --btn-focus-ring:   0 0 0 3px rgba(27, 142, 248, 0.40);

  /* Button sizes */
  --btn-h-xs:   28px;
  --btn-h-sm:   36px;
  --btn-h-md:   44px;
  --btn-h-lg:   52px;
  --btn-h-xl:   60px;

  --btn-px-xs:  var(--space-1-5);
  --btn-px-sm:  var(--space-2);
  --btn-px-md:  var(--space-3);
  --btn-px-lg:  var(--space-4);
  --btn-px-xl:  var(--space-5);

  --btn-text-xs: var(--text-xs);
  --btn-text-sm: var(--text-sm);
  --btn-text-md: var(--text-base);
  --btn-text-lg: var(--text-md);
  --btn-text-xl: var(--text-lg);

  /* ─────────────────────────────────────────────
     COMPONENT TOKENS — CARDS
  ───────────────────────────────────────────── */
  --card-radius:    var(--radius-xl);
  --card-pad:       var(--space-6);
  --card-pad-sm:    var(--space-4);
  --card-border:    var(--color-border-default);
  --card-bg:        var(--color-bg-surface);
  --card-bg-hover:  var(--color-bg-elevated);
  --card-shadow:    var(--shadow-md);
  --card-transition:all var(--duration-moderate) var(--ease-out);

  /* ─────────────────────────────────────────────
     COMPONENT TOKENS — FORMS
  ───────────────────────────────────────────── */
  --input-height:       48px;
  --input-height-sm:    40px;
  --input-height-lg:    56px;
  --input-radius:       var(--radius-md);
  --input-border:       var(--color-border-default);
  --input-border-focus: var(--color-brand-primary);
  --input-bg:           rgba(255, 255, 255, 0.04);
  --input-bg-focus:     rgba(27, 142, 248, 0.06);
  --input-pad-x:        var(--space-2);
  --input-pad-y:        var(--space-1-5);
  --input-focus-ring:   0 0 0 3px rgba(27, 142, 248, 0.25);

  /* ─────────────────────────────────────────────
     SHORTHAND TRANSITIONS
  ───────────────────────────────────────────── */
  --transition-base:      all var(--duration-normal) var(--ease-out);
  --transition-fast:      all var(--duration-quick) var(--ease-out);
  --transition-slow:      all var(--duration-moderate) var(--ease-out);
  --transition-colors:    color var(--duration-quick) var(--ease-out),
                          background-color var(--duration-quick) var(--ease-out),
                          border-color var(--duration-quick) var(--ease-out),
                          opacity var(--duration-quick) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-opacity:   opacity var(--duration-normal) var(--ease-out);
  --transition-shadow:    box-shadow var(--duration-normal) var(--ease-out);
}