/* ============================================================
   SnagPulse Design System — CSS Custom Properties
   ============================================================
   Dark editorial intelligence. Every value intentional.
   No pure blacks. No lazy grays. Depth through color.
   ============================================================ */

:root {
  /* === Color: Dark Mode (default) === */
  --bg-deep:          #0B0E14;
  --bg-primary:       #111620;
  --bg-elevated:      #171D2A;
  --bg-hover:         #1E2538;
  --bg-active:        #252D42;

  --border-subtle:    #1E2538;
  --border-default:   #2A3348;
  --border-emphasis:  #374462;

  --text-primary:     #E8ECF4;
  --text-secondary:   #A8B1C4;
  --text-tertiary:    #7E8A9E;

  /* Accent: Coral — urgency, heat, action */
  --accent-coral:     #E85D5D;
  --accent-coral-hover: #F06E6E;
  --accent-coral-dim: #3D1F1F;
  --accent-coral-glow: rgba(232, 93, 93, 0.2);

  /* Accent: Mint — savings, verified, positive */
  --accent-mint:      #34C77B;
  --accent-mint-hover: #42D48A;
  --accent-mint-dim:  #1A3329;
  --accent-mint-glow: rgba(52, 199, 123, 0.2);

  /* Accent: Amber — caution, YMMV, time pressure */
  --accent-amber:     #D4943A;
  --accent-amber-hover: #DFA34D;
  --accent-amber-dim: #332817;
  --accent-amber-glow: rgba(212, 148, 58, 0.2);

  /* Accent: Ice — links, info, navigation */
  --accent-ice:       #5B9FE6;
  --accent-ice-hover: #6DAFE9;
  --accent-ice-dim:   #1A2840;
  --accent-ice-glow:  rgba(91, 159, 230, 0.15);

  /* Surfaces */
  --surface-glass:    rgba(23, 29, 42, 0.72);
  --surface-overlay:  rgba(11, 14, 20, 0.88);
  --surface-glass-border: rgba(42, 51, 72, 0.5);

  /* Gradients */
  --gradient-hero:    linear-gradient(145deg, #111620 0%, #0D1018 45%, #14101E 100%);
  --gradient-card:    linear-gradient(180deg, #171D2A 0%, #141A26 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);

  /* Noise overlay */
  --noise-opacity:    0.025;

  /* === Typography === */
  --ff-display:  'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body:     'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:     'IBM Plex Mono', 'SF Mono', 'Cascadia Code', monospace;

  --fs-display-xl:  clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --fs-display-lg:  clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --fs-display-md:  clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  --fs-heading:     clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
  --fs-body:        clamp(0.875rem, 1vw + 0.25rem, 1rem);
  --fs-small:       clamp(0.75rem, 0.8vw + 0.2rem, 0.875rem);
  --fs-micro:       0.6875rem;
  --fs-price-hero:  clamp(2rem, 3vw + 1rem, 3rem);
  --fs-price-card:  clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --fs-price-sm:    1rem;

  --lh-tight:    1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-caps:     0.08em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* === Spacing (8px base) === */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* === Layout === */
  --content-max:     1340px;
  --content-pad:     clamp(1rem, 3vw, 2rem);
  --sidebar-w:       340px;
  --card-gap:        var(--sp-5);
  --section-gap:     var(--sp-12);
  --header-h:        64px;

  /* === Borders === */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* === Shadows (layered for depth) === */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md:
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl:
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-glow-coral: 0 0 20px var(--accent-coral-glow), 0 0 40px rgba(232, 93, 93, 0.08);
  --shadow-glow-mint:  0 0 20px var(--accent-mint-glow), 0 0 40px rgba(52, 199, 123, 0.08);

  /* === Transitions === */
  --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);
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     400ms;
  --dur-entrance: 600ms;

  /* === Z-index layers === */
  --z-base:     1;
  --z-card:     10;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* Scrollbar */
  --scrollbar-w: 6px;
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
}

/* === Light Mode === */
[data-theme="light"] {
  --bg-deep:          #F0F1F4;
  --bg-primary:       #F8F9FB;
  --bg-elevated:      #FFFFFF;
  --bg-hover:         #EFF0F3;
  --bg-active:        #E4E6EB;

  --border-subtle:    #E4E6EB;
  --border-default:   #D0D3DB;
  --border-emphasis:  #B8BCC8;

  --text-primary:     #151820;
  --text-secondary:   #5A6478;
  --text-tertiary:    #616B80;

  --accent-coral-dim: #FDE8E8;
  --accent-mint-dim:  #D4F5E4;
  --accent-amber-dim: #FEF0D8;
  --accent-ice-dim:   #DDE9F8;

  --surface-glass:    rgba(255, 255, 255, 0.82);
  --surface-overlay:  rgba(240, 241, 244, 0.92);
  --surface-glass-border: rgba(208, 211, 219, 0.5);

  --gradient-hero:    linear-gradient(145deg, #F8F9FB 0%, #F0F1F4 45%, #F5F0F8 100%);
  --gradient-card:    linear-gradient(180deg, #FFFFFF 0%, #FBFBFD 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%);

  --noise-opacity:    0.015;

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-md:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg:
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-xl:
    0 20px 60px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.05);

  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-default);
}