/* ==========================================================================
   Poplockin Mobile Locksmith — Central Design Tokens System
   A controlled, restrained automotive palette: Deep Navy + Refined Metallic Gold
   ========================================================================== */

:root {
  /* Core Palette — Deep Blue-Black Canvas & Layered Navy */
  --bg-primary:          #060B13; /* deep blue-black continuous page background */
  --bg-secondary:        #0B1320; /* slightly lighter navy for layered surfaces */
  --bg-surface:          #0F1A2B; /* elevated card and panel background */
  
  /* Unified Glass Material System */
  --surface-glass:       rgba(11, 19, 32, 0.86); /* translucent navy with strong contrast */
  --surface-glass-panel: rgba(13, 22, 36, 0.88); /* card & modal elevated glass */
  --surface-glass-input: rgba(8, 14, 24, 0.75);  /* form input glass */
  --glass-blur:          20px;

  /* Borders & Dividers — Subtle White Transparency & Restrained Accents */
  --border-subtle:       rgba(255, 255, 255, 0.09); /* soft translucent white border */
  --border-medium:       rgba(255, 255, 255, 0.14); /* active or highlighted glass border */
  --border-focus:        rgba(212, 168, 67, 0.60);  /* focus ring & active element accent */
  --border-gold:         rgba(212, 168, 67, 0.35);  /* subtle gold border accent */

  /* Text & Readability */
  --text-primary:        #FFFFFF;                    /* warm white high-contrast text */
  --text-muted:          #94A3B8;                    /* soft cool gray for secondary text */
  --text-subtle:         rgba(255, 255, 255, 0.50);  /* subtle labels, timestamps, breadcrumb seps */

  /* Brand Accent — Refined Metallic Automotive Gold (NO neon/construction yellow) */
  --accent-gold:         #D4A843; /* primary metallic gold */
  --accent-gold-hover:   #DFB75C; /* subtle brightness increase on hover */
  --accent-gold-dark:    #B88E30; /* pressed / active state */
  --accent-gold-surface: rgba(212, 168, 67, 0.12); /* badge and chip translucent background */

  /* Radius Scale */
  --radius-sm:           8px;    /* buttons, inputs, small tags */
  --radius-md:           14px;   /* cards, dropdowns, modal windows */
  --radius-lg:           20px;   /* featured showcase panels, hero cards */
  --radius-pill:         9999px; /* pill CTAs, badge chips, breadcrumb container */

  /* Layered Shadows — Large, soft, low-opacity (No harsh black outlines) */
  --shadow-soft:         0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-floating:     0 20px 50px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-glass:        inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-gold:         0 8px 24px rgba(212, 168, 67, 0.25);

  /* Spacing Rhythm */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Typography Rhythm */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;

  /* Motion & Transitions — Purposeful, subtle (180ms - 240ms) */
  --transition-fast:   180ms;
  --transition-normal: 240ms;
  --dur-fast:          180ms;
  --dur-med:           240ms;
  --dur-slow:          400ms;
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);

  /* Container & Header Constraints */
  --container-max:     1240px;
  --header-h:          64px;
  --header-h-mobile:   58px;

  /* Backward Compatibility Aliases for Seamless Integration */
  --navy-950:            var(--bg-primary);
  --navy-900:            var(--bg-secondary);
  --navy-850:            var(--bg-surface);
  --navy-800:            #152238;
  --navy-700:            #1D2E4A;
  --navy-600:            #293E61;
  --white:               var(--text-primary);
  --warm-white:          #FAF8F5;
  --gray-600:            var(--text-muted);
  --gray-500:            #9AA6B8;
  --gray-400:            #B8C3D3;
  --gold-500:            var(--accent-gold);
  --gold-400:            var(--accent-gold-hover);
  --gold-600:            var(--accent-gold-dark);
  --gold-border:         var(--border-gold);
  --gold-glow:           var(--shadow-gold);
  --color-bg:            var(--bg-primary);
  --color-surface:       var(--bg-secondary);
  --color-surface-card:  var(--bg-surface);
  --color-text:          var(--text-primary);
  --color-text-muted:    var(--text-muted);
  --color-text-subtle:   var(--text-subtle);
  --color-brand:         var(--accent-gold);
  --color-brand-strong:  var(--accent-gold-hover);
  --color-border:        var(--border-subtle);
  --color-border-dark:   var(--border-medium);
  --color-border-gold:   var(--border-gold);
  --glass-nav-bg:        var(--surface-glass);
  --glass-nav-border:    var(--border-subtle);
  --glass-nav-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-nav-blur:      var(--glass-blur);
  --glass-panel-bg:      var(--surface-glass-panel);
  --glass-panel-border:  var(--border-subtle);
  --glass-panel-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-panel-blur:    var(--glass-blur);
  --glass-cta-bg:        var(--surface-glass);
  --glass-cta-border:    var(--border-gold);
  --glass-cta-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --glass-cta-blur:      var(--glass-blur);
}