/* ============================================================
   KDRS GROUP — Design System Tokens (v2.0)
   Premium enterprise design language
   ============================================================ */

:root {
  /* ─── Brand Palette (Navy + Luxury Gold) ───────────── */
  --primary:         #0B1F3A;   /* Primary Navy */
  --primary-hover:   #132C4E;   /* Secondary Navy (button hover) */
  --primary-dark:    #08182F;
  --primary-royal:   #1E3A8A;   /* Royal Blue (gradient end) */
  --primary-light:   #EAEFF6;   /* light navy tint (subtle backgrounds) */
  --primary-ghost:   rgba(11, 31, 58, 0.06);
  --primary-glow:    rgba(11, 31, 58, 0.15);

  /* Accent — Luxury Gold */
  --accent:          #D4A64A;   /* Luxury Gold */
  --accent-hover:    #C7922F;   /* Soft Gold */
  --accent-amber:    #E6B85C;   /* Amber Hover / highlight */
  --accent-light:    #FAF3E4;

  /* ─── Semantic Colors ──────────────────────────────── */
  --success:         #16A34A;
  --success-light:   #F0FDF4;
  --warning:         #D97706;
  --warning-light:   #FFFBEB;
  --danger:          #DC2626;
  --danger-light:    #FEF2F2;
  --info:            #2563EB;
  --info-light:      #EFF6FF;

  /* ─── Text ─────────────────────────────────────────── */
  --text-primary:    #0F172A;   /* Heading */
  --text-secondary:  #475569;   /* Slate Gray (body) */
  --text-tertiary:   #64748B;   /* Muted */
  --text-inverse:    #FFFFFF;
  --ink:             #0F172A;
  /* aliases used throughout the stylesheet */
  --text:            #475569;   /* Body text */
  --text-muted:      #64748B;   /* Muted text */
  --text-light:      #94A3B8;   /* Light text */

  /* ─── Backgrounds ──────────────────────────────────── */
  --bg:              #F8FAFC;   /* Background */
  --bg-warm:         #F1F5F9;
  --surface:         #FFFFFF;   /* Sections / cards / navbar */
  --surface-elevated:#FFFFFF;
  --surface-soft:    #F1F5F9;
  --surface-mid:     #E2E8F0;

  /* ─── Borders ──────────────────────────────────────── */
  --border:          #E5E7EB;   /* Border */
  --border-light:    #EEF2F7;   /* Divider */
  --border-focus:    var(--primary);

  /* ─── Shadows (premium, multi-layer) ───────────────── */
  --shadow-xs:       0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:       0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:       0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg:       0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl:       0 20px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-2xl:      0 25px 50px -12px rgba(15, 23, 42, 0.15);
  --shadow-primary:  0 8px 24px rgba(11, 31, 58, 0.22);
  --shadow-card:     0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-card-hover: 0 20px 40px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.04);

  /* ─── Radii ────────────────────────────────────────── */
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-input:    16px;
  --radius-btn:      16px;
  --radius-card:     24px;
  --radius-hero:     32px;
  --radius-img:      28px;
  --radius-badge:    999px;
  --radius-lg:       20px;
  --radius-xl:       28px;

  /* ─── Spacing (8px grid) ───────────────────────────── */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    28px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-30:   120px;
  --sp-40:   160px;

  /* ─── Typography ───────────────────────────────────── */
  --font-sans:       'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  --text-hero:       clamp(3.2rem, 5.5vw, 5rem);
  --text-h1:         clamp(2.8rem, 4.5vw, 4rem);
  --text-h2:         clamp(2rem, 3.5vw, 3rem);
  --text-h3:         clamp(1.5rem, 2.5vw, 2.25rem);
  --text-h4:         clamp(1.25rem, 2vw, 1.75rem);
  --text-body-lg:    1.25rem;
  --text-body:       1.125rem;
  --text-sm:         1rem;
  --text-caption:    0.875rem;
  --text-xs:         0.75rem;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.08em;

  /* ─── Layout ───────────────────────────────────────── */
  --container:       1280px;
  --container-lg:    1440px;
  --header-h:        80px;
  --section-pad:     120px;
  --section-pad-sm:  80px;

  /* ─── Motion ───────────────────────────────────────── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
  --transition:      all var(--duration-base) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* ─── Glass ────────────────────────────────────────── */
  --glass-bg:        rgba(255, 255, 255, 0.72);
  --glass-border:    rgba(255, 255, 255, 0.18);
  --glass-blur:      20px;

  /* ─── Gradients ────────────────────────────────────── */
  --gradient-primary:  linear-gradient(135deg, #0B1F3A 0%, #1E3A8A 100%);
  --gradient-dark:     linear-gradient(135deg, #0B1F3A 0%, #08182F 100%);
  --gradient-surface:  linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  --gradient-hero:     linear-gradient(135deg, #0B1F3A 0%, #132C4E 45%, #1E3A8A 100%);
  --gradient-gold:     linear-gradient(115deg, #C7922F 0%, #D4A64A 50%, #E6B85C 100%);
  --gradient-cta:      linear-gradient(135deg, #0B1F3A 0%, #132C4E 100%);
}