/* ============================================
   HIBRAAR SOLUTIONS — Design Tokens v2.0
   Modern Advanced Design System
   ============================================ */

:root {
  /* ── Primary Colors ── */
  --color-navy:       #0C1B33;
  --color-navy-light: #1a2d4d;
  --color-navy-dark:  #070f1f;
  --color-navy-rgb:   12, 27, 51;
  --color-blue:       #2563EB;
  --color-blue-light: #3b82f6;
  --color-blue-dark:  #1d4ed8;
  --color-blue-rgb:   37, 99, 235;
  --color-gold:       #C9A84C;
  --color-gold-light: #d4b96a;
  --color-gold-dark:  #b89535;
  --color-gold-rgb:   201, 168, 76;
  --color-cream:      #FAF7F2;
  --color-cream-rgb:  250, 247, 242;
  --color-white:      #FFFFFF;
  --color-white-rgb:  255, 255, 255;

  /* ── Semantic Colors ── */
  --color-success:    #059669;
  --color-danger:     #E11D48;
  --color-warning:    #D97706;

  /* ── Neutral Colors ── */
  --color-neutral-900: #111827;
  --color-neutral-800: #1F2937;
  --color-neutral-700: #374151;
  --color-neutral-600: #4B5563;
  --color-neutral-500: #6B7280;
  --color-neutral-400: #9CA3AF;
  --color-neutral-300: #D1D5DB;
  --color-neutral-200: #E5E7EB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-50:  #F9FAFB;

  /* ── Border Colors ── */
  --color-border:       #E5DED3;
  --color-border-light: #F0ECE4;

  /* ── Gradients ── */
  --gradient-hero:      linear-gradient(135deg, #0C1B33 0%, #1a2d4d 50%, #0C1B33 100%);
  --gradient-gold:      linear-gradient(135deg, #C9A84C 0%, #d4b96a 100%);
  --gradient-blue:      linear-gradient(135deg, #2563EB 0%, #3b82f6 100%);
  --gradient-dark:      linear-gradient(135deg, #070f1f 0%, #0C1B33 100%);
  --gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-card:      linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  --gradient-mesh:      radial-gradient(at 40% 20%, rgba(201,168,76,0.15) 0px, transparent 50%),
                        radial-gradient(at 80% 0%, rgba(37,99,235,0.1) 0px, transparent 50%),
                        radial-gradient(at 0% 50%, rgba(201,168,76,0.1) 0px, transparent 50%);
  --gradient-text:      linear-gradient(135deg, #C9A84C 0%, #d4b96a 50%, #C9A84C 100%);
  --gradient-border:    linear-gradient(135deg, rgba(201,168,76,0.3) 0%, rgba(37,99,235,0.3) 100%);

  /* ── Typography ── */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Font Sizes ── */
  --text-display: clamp(2.5rem, 5vw, 4.5rem);
  --text-h1:      clamp(2rem, 4vw, 3.5rem);
  --text-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --text-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --text-h4:      clamp(1.1rem, 1.5vw, 1.35rem);
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-button:  0.875rem;

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

  /* ── Line Heights ── */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── Letter Spacing ── */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ── Spacing Scale — Responsive ── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  clamp(0.75rem, 1vw, 1rem);
  --space-lg:  clamp(1rem, 1.5vw, 1.5rem);
  --space-xl:  clamp(1.25rem, 2vw, 2rem);
  --space-2xl: clamp(1.5rem, 2.5vw, 3rem);
  --space-3xl: clamp(2rem, 3vw, 4rem);
  --space-4xl: clamp(2.5rem, 4vw, 6rem);
  --space-5xl: clamp(3rem, 5vw, 8rem);
  --space-6xl: clamp(4rem, 6vw, 10rem);

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

  /* ── Shadows ── */
  --shadow-xs:    0 1px 2px rgba(12, 27, 51, 0.04);
  --shadow-sm:    0 1px 3px rgba(12, 27, 51, 0.06), 0 1px 2px rgba(12, 27, 51, 0.04);
  --shadow-md:    0 4px 6px rgba(12, 27, 51, 0.06), 0 2px 4px rgba(12, 27, 51, 0.04);
  --shadow-lg:    0 10px 15px rgba(12, 27, 51, 0.08), 0 4px 6px rgba(12, 27, 51, 0.04);
  --shadow-xl:    0 20px 25px rgba(12, 27, 51, 0.10), 0 8px 10px rgba(12, 27, 51, 0.04);
  --shadow-2xl:   0 25px 50px rgba(12, 27, 51, 0.15);
  --shadow-glow:  0 0 40px rgba(201, 168, 76, 0.15);
  --shadow-glow-blue: 0 0 40px rgba(37, 99, 235, 0.15);
  --shadow-card:  0 4px 24px rgba(12, 27, 51, 0.06);
  --shadow-card-hover: 0 12px 40px rgba(12, 27, 51, 0.12);

  /* ── Glass Effects ── */
  --glass-bg:     rgba(255, 255, 255, 0.08);
  --glass-bg-light: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur:   20px;

  /* ── Layout ── */
  --container-max:   1200px;
  --container-wide:  1400px;
  --container-narrow: 800px;
  --container-full:  100%;
  --nav-height:      80px;
  --nav-height-scrolled: 64px;

  /* ── Transitions ── */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  350ms;
  --duration-slow:    500ms;
  --duration-slower:  700ms;
  --duration-slowest: 1000ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --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.55, 0.265, 1.55);
  --ease-spring:      cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Z-Index ── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

  /* ── Blur ── */
  --blur-sm:   4px;
  --blur-md:   8px;
  --blur-lg:   16px;
  --blur-xl:   24px;
  --blur-2xl:  40px;
}