/* ============================================================
   TRACK MY WASH — Design Tokens
   Glassmorphism · Electric Blue · Orange · Red · Black · Gold
   Day / Night auto-switch
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Night Mode (default) ─────────────────────────────────── */
:root {
  /* Core */
  --clr-bg:          #050A14;
  --clr-bg-2:        #080F1E;
  --clr-bg-3:        #0B1528;

  /* Electric Blue */
  --clr-blue:        #0066FF;
  --clr-blue-lt:     #338BFF;
  --clr-blue-dk:     #0047CC;
  --clr-blue-glow:   rgba(0,102,255,0.35);

  /* Orange */
  --clr-orange:      #FF6B00;
  --clr-orange-lt:   #FF8C3A;
  --clr-orange-glow: rgba(255,107,0,0.30);

  /* Red */
  --clr-red:         #FF2442;
  --clr-red-lt:      #FF5670;
  --clr-red-glow:    rgba(255,36,66,0.30);

  /* Gold (used sparingly) */
  --clr-gold:        #C9A84C;
  --clr-gold-lt:     #E2C472;

  /* Semantic */
  --clr-success:     #00D68F;
  --clr-warning:     #FFB800;
  --clr-error:       var(--clr-red);

  /* Text */
  --clr-text:        #F0F4FF;
  --clr-text-2:      #9BB0D0;
  --clr-text-3:      #4A6080;

  /* Glass */
  --glass-bg:        rgba(255,255,255,0.05);
  --glass-bg-2:      rgba(255,255,255,0.08);
  --glass-bg-3:      rgba(255,255,255,0.12);
  --glass-border:    rgba(255,255,255,0.10);
  --glass-border-2:  rgba(255,255,255,0.16);
  --glass-blur:      blur(24px);
  --glass-blur-lg:   blur(40px);

  /* Blue glass variant */
  --glass-blue:      rgba(0,102,255,0.08);
  --glass-blue-b:    rgba(0,102,255,0.20);

  /* Shadows */
  --shadow-sm:   0 2px 12px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.55);
  --shadow-lg:   0 16px 56px rgba(0,0,0,0.65);
  --shadow-blue: 0 0 32px rgba(0,102,255,0.25);
  --shadow-orange:0 0 24px rgba(255,107,0,0.30);

  /* Typography */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Scale */
  --text-xs:   0.70rem;
  --text-sm:   0.83rem;
  --text-base: 1rem;
  --text-md:   1.1rem;
  --text-lg:   1.3rem;
  --text-xl:   1.6rem;
  --text-2xl:  2rem;
  --text-3xl:  2.8rem;
  --text-4xl:  3.6rem;

  /* Spacing */
  --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;

  /* Radii */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 9999px;

  /* Transitions */
  --tr-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --tr-base: 280ms cubic-bezier(0.4,0,0.2,1);
  --tr-slow: 480ms cubic-bezier(0.4,0,0.2,1);
  --tr-spring: 400ms cubic-bezier(0.34,1.56,0.64,1);

  /* Z-index */
  --z-bubbles: 0;
  --z-content: 10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
  --z-splash:  400;

  /* Cover overlay */
  --cover-overlay: linear-gradient(
    to bottom,
    rgba(5,10,20,0.45) 0%,
    rgba(5,10,20,0.65) 50%,
    rgba(5,10,20,0.92) 100%
  );

  color-scheme: dark;
}

/* ── Day Mode (6am–6pm) ───────────────────────────────────── */
:root.day {
  --clr-bg:    #EEF2FA;
  --clr-bg-2:  #E4EAF6;
  --clr-bg-3:  #D8E2F2;

  --clr-text:  #050A14;
  --clr-text-2:#2A4070;
  --clr-text-3:#6080A8;

  --glass-bg:    rgba(255,255,255,0.60);
  --glass-bg-2:  rgba(255,255,255,0.72);
  --glass-bg-3:  rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.08);
  --glass-border-2:rgba(0,0,0,0.14);
  --glass-blue:   rgba(0,102,255,0.06);

  --shadow-sm: 0 2px 12px rgba(10,20,60,0.10);
  --shadow-md: 0 8px 32px rgba(10,20,60,0.14);
  --shadow-lg: 0 16px 56px rgba(10,20,60,0.18);

  --cover-overlay: linear-gradient(
    to bottom,
    rgba(238,242,250,0.20) 0%,
    rgba(5,10,20,0.55) 60%,
    rgba(5,10,20,0.88) 100%
  );

  color-scheme: light;
}