/* ============================================
   DH TECH — Design System: CSS Variables
   Light Premium Technology Studio
   Three-layer Architecture: Primitive → Semantic → Component
   ============================================ */

/* ---- GOOGLE FONTS IMPORT ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================
   LAYER 1: PRIMITIVE TOKENS
   Raw design tokens
   ============================================ */
:root {
  /* --- Neutral Scale (Crisp Light Studio) --- */
  --primitive-white:     #FFFFFF;
  --primitive-slate-25:  #FAFCFF;
  --primitive-slate-50:  #F8FAFC;
  --primitive-slate-100: #F1F5F9;
  --primitive-slate-200: #E2E8F0;
  --primitive-slate-300: #CBD5E1;
  --primitive-slate-400: #94A3B8;
  --primitive-slate-500: #64748B;
  --primitive-slate-600: #475569;
  --primitive-slate-700: #334155;
  --primitive-slate-800: #1E293B;
  --primitive-slate-900: #0F172A;
  --primitive-slate-950: #020617;

  /* --- Brand Blue (from DH TECH Logo) --- */
  --primitive-blue-50:  #EFF6FF;
  --primitive-blue-100: #DBEAFE;
  --primitive-blue-200: #BFDBFE;
  --primitive-blue-300: #93C5FD;
  --primitive-blue-400: #60A5FA;
  --primitive-blue-500: #3B82F6;
  --primitive-blue-600: #2563EB;
  --primitive-blue-700: #1D4ED8;
  --primitive-blue-800: #1E40AF;
  --primitive-blue-900: #1E3A8A;

  /* --- Brand Cyan / Teal Accent --- */
  --primitive-cyan-50:  #ECFEFF;
  --primitive-cyan-100: #CFFAFE;
  --primitive-cyan-200: #A5F3FC;
  --primitive-cyan-300: #67E8F9;
  --primitive-cyan-400: #22D3EE;
  --primitive-cyan-500: #06B6D4;
  --primitive-cyan-600: #0891B2;

  /* --- Status Colors --- */
  --primitive-green-50:  #F0FDF4;
  --primitive-green-500: #16A34A;
  --primitive-green-600: #15803D;

  --primitive-red-50:    #FEF2F2;
  --primitive-red-500:   #DC2626;
  --primitive-red-600:   #B91C1C;

  --primitive-amber-500: #D97706;

  /* --- Typography Primitives --- */
  --primitive-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primitive-font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;

  /* Font sizes */
  --primitive-text-xs:   0.75rem;    /* 12px */
  --primitive-text-sm:   0.875rem;   /* 14px */
  --primitive-text-base: 1rem;       /* 16px */
  --primitive-text-lg:   1.125rem;   /* 18px */
  --primitive-text-xl:   1.25rem;    /* 20px */
  --primitive-text-2xl:  1.5rem;     /* 24px */
  --primitive-text-3xl:  1.875rem;   /* 30px */
  --primitive-text-4xl:  2.25rem;    /* 36px */
  --primitive-text-5xl:  3rem;       /* 48px */
  --primitive-text-6xl:  3.75rem;    /* 60px */
  --primitive-text-7xl:  4.5rem;     /* 72px */
  --primitive-text-8xl:  5.5rem;     /* 88px */

  /* --- Spacing Primitives (8pt grid system) --- */
  --primitive-space-1:   0.25rem;    /* 4px */
  --primitive-space-2:   0.5rem;     /* 8px */
  --primitive-space-3:   0.75rem;    /* 12px */
  --primitive-space-4:   1rem;       /* 16px */
  --primitive-space-5:   1.25rem;    /* 20px */
  --primitive-space-6:   1.5rem;     /* 24px */
  --primitive-space-8:   2rem;       /* 32px */
  --primitive-space-10:  2.5rem;     /* 40px */
  --primitive-space-12:  3rem;       /* 48px */
  --primitive-space-16:  4rem;       /* 64px */
  --primitive-space-20:  5rem;       /* 80px */
  --primitive-space-24:  6rem;       /* 96px */
  --primitive-space-32:  8rem;       /* 128px */

  /* --- Border Radius Primitives --- */
  --primitive-radius-xs:  4px;
  --primitive-radius-sm:  6px;
  --primitive-radius-md:  10px;
  --primitive-radius-lg:  14px;
  --primitive-radius-xl:  20px;
  --primitive-radius-2xl: 28px;
  --primitive-radius-full: 9999px;

  /* --- Transition Primitives --- */
  --primitive-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --primitive-ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --primitive-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   LAYER 2: SEMANTIC TOKENS (LIGHT PREMIUM DEFAULT)
   ============================================ */
:root {
  /* --- Backgrounds --- */
  --color-bg:            var(--primitive-white);
  --color-bg-secondary:  var(--primitive-slate-50);
  --color-bg-tertiary:   var(--primitive-slate-100);
  --color-bg-card:       var(--primitive-white);
  --color-bg-card-hover: var(--primitive-white);
  --color-bg-overlay:    rgba(15, 23, 42, 0.45);

  /* --- Surface & Glass --- */
  --color-surface:       var(--primitive-slate-50);
  --color-surface-glass: rgba(255, 255, 255, 0.85);

  /* --- Text Hierarchy (Dark Navy / Slate) --- */
  --color-text-primary:   var(--primitive-slate-900);  /* #0F172A - Deep navy */
  --color-text-secondary: var(--primitive-slate-600);  /* #475569 - Neutral slate */
  --color-text-muted:     var(--primitive-slate-500);  /* #64748B - Accessible caption */
  --color-text-subtle:    var(--primitive-slate-400);  /* #94A3B8 */
  --color-text-inverse:   var(--primitive-white);

  /* --- Brand / Primary / Accent --- */
  --color-primary:        var(--primitive-blue-600);   /* #2563EB - Royal blue */
  --color-primary-hover:  var(--primitive-blue-700);   /* #1D4ED8 */
  --color-primary-light:  rgba(37, 99, 235, 0.08);
  --color-primary-glow:   rgba(37, 99, 235, 0.2);
  --color-accent:         var(--primitive-cyan-600);   /* #0891B2 */
  --color-accent-light:   rgba(6, 182, 212, 0.08);

  /* --- Borders & Dividers --- */
  --color-border:         var(--primitive-slate-200);   /* #E2E8F0 */
  --color-border-light:   rgba(226, 232, 240, 0.6);
  --color-border-active:  rgba(37, 99, 235, 0.45);

  /* --- Status --- */
  --color-success:        var(--primitive-green-500);
  --color-success-bg:     var(--primitive-green-50);
  --color-error:          var(--primitive-red-500);
  --color-error-bg:       var(--primitive-red-50);
  --color-warning:        var(--primitive-amber-500);

  /* --- Gradients --- */
  --gradient-primary:      linear-gradient(135deg, var(--primitive-blue-600) 0%, var(--primitive-cyan-500) 100%);
  --gradient-brand:        linear-gradient(135deg, var(--primitive-blue-700) 0%, var(--primitive-blue-600) 40%, var(--primitive-cyan-500) 100%);
  --gradient-brand-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
  --gradient-hero:         radial-gradient(ellipse at 50% -10%, rgba(37, 99, 235, 0.08) 0%, rgba(6, 182, 212, 0.05) 45%, transparent 70%);
  --gradient-card:         linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-text:         linear-gradient(135deg, #0F172A 0%, #334155 100%);
  --gradient-shimmer:      linear-gradient(90deg, #1D4ED8 0%, #06B6D4 40%, #2563EB 80%, #1D4ED8 100%);

  /* --- Typography --- */
  --font-sans:     var(--primitive-font-sans);
  --font-display:  var(--primitive-font-display);

  --text-xs:   var(--primitive-text-xs);
  --text-sm:   var(--primitive-text-sm);
  --text-base: var(--primitive-text-base);
  --text-lg:   var(--primitive-text-lg);
  --text-xl:   var(--primitive-text-xl);
  --text-2xl:  var(--primitive-text-2xl);
  --text-3xl:  var(--primitive-text-3xl);
  --text-4xl:  var(--primitive-text-4xl);
  --text-5xl:  var(--primitive-text-5xl);
  --text-6xl:  var(--primitive-text-6xl);
  --text-7xl:  var(--primitive-text-7xl);
  --text-8xl:  var(--primitive-text-8xl);

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.035em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.15em;

  /* --- Spacing --- */
  --space-1:  var(--primitive-space-1);
  --space-2:  var(--primitive-space-2);
  --space-3:  var(--primitive-space-3);
  --space-4:  var(--primitive-space-4);
  --space-5:  var(--primitive-space-5);
  --space-6:  var(--primitive-space-6);
  --space-8:  var(--primitive-space-8);
  --space-10: var(--primitive-space-10);
  --space-12: var(--primitive-space-12);
  --space-16: var(--primitive-space-16);
  --space-20: var(--primitive-space-20);
  --space-24: var(--primitive-space-24);
  --space-32: var(--primitive-space-32);

  --section-padding-y: 6.5rem;
  --section-padding-x: var(--primitive-space-6);
  --container-max:     1200px;
  --container-wide:    1400px;

  /* --- Radius --- */
  --radius-xs:   var(--primitive-radius-xs);
  --radius-sm:   var(--primitive-radius-sm);
  --radius-md:   var(--primitive-radius-md);
  --radius-lg:   var(--primitive-radius-lg);
  --radius-xl:   var(--primitive-radius-xl);
  --radius-2xl:  var(--primitive-radius-2xl);
  --radius-full: var(--primitive-radius-full);

  /* --- Shadows (Light Premium Multi-layered Elevation) --- */
  --shadow-xs:          0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:          0 2px 4px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-md:          0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg:          0 12px 32px -4px rgba(15, 23, 42, 0.07), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
  --shadow-xl:          0 20px 48px -8px rgba(15, 23, 42, 0.09), 0 8px 20px -4px rgba(15, 23, 42, 0.03);
  --shadow-glow:        0 8px 24px rgba(37, 99, 235, 0.12);
  --shadow-glow-strong: 0 14px 36px rgba(37, 99, 235, 0.22);

  /* --- Transitions --- */
  --transition-fast:   150ms var(--primitive-ease-out);
  --transition-normal: 300ms var(--primitive-ease-out);
  --transition-slow:   500ms var(--primitive-ease-out);
  --transition-spring: 400ms var(--primitive-spring);

  /* --- Z-index --- */
  --z-base:     1;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-overlay:  400;
}

/* ============================================
   LAYER 3: COMPONENT TOKENS
   ============================================ */
:root {
  /* Navbar */
  --navbar-height:        74px;
  --navbar-bg:            rgba(255, 255, 255, 0.82);
  --navbar-bg-scroll:     rgba(255, 255, 255, 0.94);
  --navbar-border:        rgba(226, 232, 240, 0.6);
  --navbar-border-scroll: var(--color-border);
  --navbar-shadow:        0 4px 20px -2px rgba(15, 23, 42, 0.04);

  /* Button */
  --btn-radius:        var(--radius-md);
  --btn-padding-y:     0.8rem;
  --btn-padding-x:     1.75rem;
  --btn-font-weight:   600;
  --btn-font-size:     var(--text-sm);
  --btn-transition:    var(--transition-normal);

  /* Card */
  --card-bg:           var(--primitive-white);
  --card-border:       var(--color-border);
  --card-radius:       var(--radius-xl);
  --card-padding:      var(--space-8);
  --card-shadow:       var(--shadow-md);
  --card-shadow-hover: var(--shadow-xl);

  /* Form Elements */
  --input-bg:          var(--primitive-white);
  --input-border:      var(--primitive-slate-300);
  --input-border-focus:var(--color-primary);
  --input-radius:      var(--radius-md);
  --input-padding-y:   0.875rem;
  --input-padding-x:   1rem;
  --input-color:       var(--color-text-primary);
  --input-placeholder: var(--color-text-subtle);
}