/* ============================================================
   DESIGN TOKENS — Sunrise Testing & Calibration Centre
   Visual Theme: Aleph India Corporate Compliance Benchmark
   Palette: Royal Blue, Slate Navy, Soft Blue & Crisp White
   ============================================================ */

:root {
  /* ==========================================================
     1. BRAND COLORS (Verified Aleph India Palette)
     ========================================================== */
  --primary:            #002e85; /* Royal Navy Blue (Core Brand) */
  --primary-hover:      #002366;
  --primary-light:      #e2ecfd; /* Soft Blue Chip/Badge Surface */
  --primary-subtle:     rgba(0, 46, 133, 0.08);

  --secondary:          #0056c6; /* Vibrant Corporate Blue (Action CTAs) */
  --secondary-hover:    #00449e;
  --secondary-light:    #cde9fe;
  --secondary-subtle:   rgba(0, 86, 198, 0.08);

  --accent-cyan:        #46aefd; /* Light Tech Blue / Hero Highlight */
  --accent-cyan-subtle: rgba(70, 174, 253, 0.15);
  --accent-orange:      #ff7b00; /* Warm Accent (Star rating / Notice) */
  --accent-orange-soft: rgba(255, 123, 0, 0.12);
  --accent-green:       #10b981; /* Verified Registration Badge */
  --accent-green-soft:  rgba(16, 185, 129, 0.12);

  /* Semantic Action States */
  --action-primary-bg:  #0056c6;
  --action-primary-fg:  #ffffff;
  --action-hover-bg:    #002e85;
  --success:            #10b981;
  --danger:             #e0342c;
  --whatsapp:           #25d366;
  --whatsapp-dark:      #0b3d2e;

  /* ==========================================================
     2. SURFACE SCALES (Alternating Section Rhythm)
     ========================================================== */
  /* Light Surfaces (51% Dominance in Aleph India) */
  --surface-white:      #ffffff;
  --surface-light:      #f8fafc;
  --surface-blue-soft:  #f4f6fb; /* Soft Blue Section Canvas */
  --surface-blue-card:  #ffffff; /* Crisp White Cards on Soft Blue */
  --surface-chip:       #e2ecfd; /* Blue Taxonomy Chip */

  /* Dark Slate Surfaces (40% Dominance in Aleph India) */
  --surface-dark-slate: #0f172a; /* Hero & Consultancy Deep Slate Canvas */
  --surface-dark-navy:  #0b1320; /* High-contrast Background */
  --surface-dark-card:  #1e293b; /* Raised Card on Dark Canvas */
  --surface-dark-panel: #132238; /* Semi-dark Card */
  --surface-dark-glass: rgba(30, 41, 59, 0.7);
  --surface-hero-glass:        rgba(15, 23, 42, 0.65);
  --surface-hero-glass-hover:  rgba(0, 46, 133, 0.35);
  --surface-hero-glass-active: rgba(0, 35, 102, 0.50);

  /* ==========================================================
     3. TEXT & NEUTRALS
     ========================================================== */
  /* Dark text on light backgrounds */
  --text-dark-primary:   #12172b; /* Heading text (AAA on white) */
  --text-dark-secondary: #334155; /* High-legibility Body copy */
  --text-dark-muted:     #64748b; /* Secondary / Meta text */
  --text-dark-subtle:    #94a3b8; /* Caption / Border text */

  /* Light text on dark backgrounds */
  --text-light-primary:   #ffffff; /* Headings on dark slate */
  --text-light-secondary: #cbd5e1; /* Subtitles on dark slate */
  --text-light-muted:     #94a3b8; /* Meta labels on dark slate */

  /* ==========================================================
     4. BORDERS & DIVIDERS
     ========================================================== */
  --border-light:        #e2e8f0;
  --border-subtle:       #edf2f7;
  --border-blue-soft:    #cde9fe;
  --border-dark:         rgba(255, 255, 255, 0.12);
  --border-dark-subtle:  rgba(255, 255, 255, 0.06);
  --border-hero-glass:         rgba(70, 174, 253, 0.22);
  --border-hero-glass-hover:   rgba(70, 174, 253, 0.55);
  --border-focus:        #3b82f6;

  /* ==========================================================
     5. TYPOGRAPHY (Poppins & Plus Jakarta Sans)
     ========================================================== */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid Type Scale (Clamped, Rem-based) */
  --text-display: clamp(2.25rem, 4vw + 0.5rem, 3.25rem);
  --text-h1:      clamp(1.75rem, 3vw + 0.4rem, 2.5rem);
  --text-h2:      clamp(1.35rem, 2vw + 0.3rem, 1.9rem);
  --text-h3:      clamp(1.1rem, 1.5vw + 0.3rem, 1.4rem);
  --text-h4:      clamp(1.05rem, 1vw + 0.3rem, 1.25rem);
  --text-body:    1rem;     /* 16px */
  --text-body-sm: 0.9rem;   /* 14.4px */
  --text-small:   0.8125rem;/* 13px */
  --text-caption: 0.85rem;  /* 13.6px */
  --text-micro:   0.75rem;  /* 12px */

  /* ==========================================================
     6. SPACING SCALE (4px Base Grid)
     ========================================================== */
  --sp-1:  0.25rem;  /* 4px */
  --sp-2:  0.5rem;   /* 8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.5rem;   /* 24px */
  --sp-6:  2rem;     /* 32px */
  --sp-7:  3rem;     /* 48px */
  --sp-8:  4rem;     /* 64px */
  --sp-9:  5.5rem;   /* 88px Section Vertical Rhythm */
  --sp-10: 7.5rem;   /* 120px */

  /* ==========================================================
     7. BORDER RADII (Aleph India Rounded Component Shape)
     ========================================================== */
  --radius-xs:   4px;
  --radius-s:    6px;
  --radius-m:    10px;
  --radius-l:    16px;   /* Standard Card & Button */
  --radius-xl:   20px;   /* Feature Card */
  --radius-full: 9999px; /* Pill Badges & Rounded CTAs */

  /* ==========================================================
     8. ELEVATION & SHADOWS (Layered & Tinted)
     ========================================================== */
  --shadow-sm:         0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow-card:       0 2px 10px 0 rgba(20, 20, 43, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 8px 25px -4px rgba(0, 46, 133, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
  --shadow-nav:        0 2px 12px 0 rgba(10, 42, 110, 0.05);
  --shadow-glow:       0 0 20px rgba(0, 86, 198, 0.35);
  --shadow-hero-chip-glow:     0 4px 16px rgba(0, 86, 198, 0.25), 0 0 10px rgba(70, 174, 253, 0.15);
  --shadow-cta-hover:          0 8px 24px rgba(0, 86, 198, 0.45), 0 0 16px rgba(70, 174, 253, 0.25);

  /* ==========================================================
     9. MICRO-TEXTURES & GRADIENTS
     ========================================================== */
  --pattern-dot-grid-dark:  radial-gradient(rgba(70, 174, 253, 0.16) 1.5px, transparent 1.5px);
  --pattern-dot-grid-light: radial-gradient(rgba(0, 46, 133, 0.08) 1.5px, transparent 1.5px);
  --pattern-grid-size:      24px 24px;
  --gradient-primary:       linear-gradient(135deg, #002e85 0%, #0056c6 100%);
  --gradient-cta:           linear-gradient(135deg, #0056c6 0%, #014de3 100%);
  --gradient-cyan:          linear-gradient(90deg, #3ea7fb 0%, #6dc0ff 100%);
  --gradient-dark-hero:     radial-gradient(circle at 10% 20%, #0f172a 0%, #0b1320 90%);

  /* ==========================================================
     10. LAYOUT & TRANSITIONS
     ========================================================== */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 3rem);
  --header-h:      76px;

  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:      cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast:    150ms;
  --duration-micro:   200ms;
  --duration-normal:  250ms;

  /* ==========================================================
     11. BACKWARD-COMPATIBILITY ALIASES
     (Preserves existing codebase variables seamlessly)
     ========================================================== */
  --navy-950:   var(--surface-dark-slate);
  --navy-900:   var(--surface-dark-navy);
  --navy-800:   var(--surface-dark-card);
  --navy-700:   #243d62;
  --navy-600:   #3b5bdb;

  --gold-600:   #002e85; /* Re-mapped to Royal Navy */
  --gold-500:   #0056c6; /* Re-mapped to Vibrant Action Blue */
  --gold-400:   #46aefd; /* Re-mapped to Cyan Accent */
  --gold-300:   #91c0ff; /* Re-mapped to Soft Accent */

  --steel-600:  var(--text-dark-secondary);
  --steel-500:  var(--text-dark-muted);
  --steel-400:  var(--text-dark-subtle);
  --steel-300:  var(--text-light-secondary);

  --paper-100:  var(--surface-blue-soft);
  --paper-50:   var(--surface-white);
  --paper-0:    var(--surface-white);

  --surface:           var(--surface-white);
  --ink-900:           var(--text-dark-primary);
  --ink-500:           var(--text-dark-secondary);
  --ink-border:        var(--border-light);
  --ink-border-subtle: var(--border-subtle);
}