/* ==========================================================================
   SecureVision Technologies — Design Tokens
   Original design system. Cool azure / navy / slate technical palette.

   Primitives are named for what they *are* (azure, navy, amber). Components
   should reach for the semantic aliases below (--primary, --bg, --accent) so a
   future rebrand only touches this file.
   ========================================================================== */

:root {
  /* ---- Color: primitives (SecureVision palette) ---- */
  --mist:        #F5F7FA;  /* cool off-white — page background */
  --paper:       #FFFFFF;  /* white — raised surfaces / cards */
  --haze:        #E8EEF6;  /* subtle blue-grey fill */
  --graphite:    #111827;  /* near-black — primary ink */
  --charcoal:    #1F2937;
  --azure:       #0F4C9C;  /* deep azure — primary brand */
  --azure-deep:  #0A3A7A;  /* darker azure — hover */
  --navy:        #0B1F3A;  /* deep navy — dark sections */
  --navy-deep:   #071221;  /* deepest navy — footer, loader, mobile menu */
  --steel:       #475569;  /* slate — secondary */
  --amber:       #D97706;  /* amber — accent on light */
  --amber-light: #FBBF24;  /* lighter amber — on dark surfaces */
  --emerald:     #15803D;  /* success / confirmation */
  --muted:       #5A6675;  /* muted text on light */
  --muted-dark:  #A9BCD4;  /* muted text on navy */
  --border:      #DCE3EC;  /* cool grey border */
  --border-dark: #1D3A5F;  /* subtle divider on navy */
  --white:       #FFFFFF;

  /* ---- Color: semantic ---- */
  --bg:            var(--mist);
  --surface:       var(--paper);
  --ink:           var(--graphite);
  --ink-soft:      var(--muted);
  --primary:       var(--azure);
  --primary-hover: var(--azure-deep);
  --accent:        var(--amber);
  --success:       var(--emerald);
  --line:          var(--border);
  --focus:         var(--primary);

  /* dark-section semantics */
  --bg-dark:       var(--navy);
  --bg-dark-deep:  var(--navy-deep);
  --ink-on-dark:   #EAF1F9;
  --ink-on-dark-soft: var(--muted-dark);
  --line-on-dark:  var(--border-dark);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-eyebrow: 0.8125rem;                        /* 13px labels */
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h6:      clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --fs-h5:      clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  --fs-h4:      clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  --fs-h3:      clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --fs-h2:      clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --fs-h1:      clamp(2.8rem, 1.8rem + 5vw, 6.5rem);
  --fs-display: clamp(3.2rem, 1.6rem + 8vw, 9rem);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.65;
  --tracking-label: 0.22em;
  --tracking-tight: -0.02em;

  /* ---- Spacing scale (standard density, 8pt-based) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 3rem + 6vw, 9rem);

  /* ---- Layout ---- */
  --container: 1280px;
  --container-wide: 1500px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow:    0 10px 30px -12px rgba(11, 31, 58, 0.20);
  --shadow-lg: 0 30px 60px -20px rgba(11, 31, 58, 0.32);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;

  /* ---- z-index scale ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-nav: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  --z-loader: 300;
}