/* ============================================================
   base.css
   Global resets, CSS custom properties (design tokens), and
   body defaults. All color/font/spacing values are defined here
   and consumed by every other CSS module via var().
   ============================================================ */

/* ---------- Box Model Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Root Defaults ---------- */
html,
body {
  height: 100%;
  /* Viewport-locked layout on desktop; scroll restored at mobile breakpoint */
  overflow: hidden;
  font-family: var(--font-body);
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Design Tokens ---------- */
:root {

  /* Fonts
     Loaded via <link> in index.html (preconnect for performance).
     --font-arcade  : VT323             — Retro Arcade panel
     --font-beauty  : Cedarville Cursive — Beauty Salon panel
     --font-body    : Inter             — HVACR panel + main site overlay */
  --font-body:   'Inter', system-ui, sans-serif;
  --font-arcade: 'VT323', monospace;
  --font-beauty: 'Cedarville Cursive', cursive;

  /* ---- Shared globals ---- */
  --color-white: #fff;

  /* ---- Layout ---- */
  --layout-gap-color: #1a1025;   /* dark gap rendered between the three mockup panels */

  /* ---- Arcade palette ---- */
  --arcade-bg:           #060618;
  --arcade-neon:         #00f0ff;
  --arcade-neon-dim:     #0080b0;
  --arcade-neon-glow:    #0040ff;
  --arcade-text:         #00e4ff;
  --arcade-accent:       #ff00aa;           /* magenta for the blinking CTA */
  --arcade-grid-line:    rgba(0, 200, 255, 0.04);   /* faint CRT grid tint */
  --arcade-scanline-mid: rgba(0, 0, 0, 0.18);        /* scanline dark band */

  /* ---- Beauty palette ---- */
  --beauty-bg:           #e8097a;
  --beauty-star-light:   #ffc2e0;
  --beauty-star-mid:     #ff69b4;
  --beauty-star-dark:    #a3005a;
  --beauty-text:         #fff8fc;
  --beauty-nav-bg:       rgba(255, 255, 255, 0.18);
  --beauty-nav-border:   rgba(255, 255, 255, 0.55);
  --beauty-shadow-deep:  rgba(140, 0, 73, 0.55);    /* title text-shadow, deep pink */
  --beauty-star-sparkle: rgba(255, 255, 255, 0.85); /* large white sparkle dots */
  --beauty-nav-glow:     rgba(255, 255, 255, 0.15); /* nav button inner glow */
  --beauty-tagline:      rgba(255, 248, 252, 0.72); /* tagline text at reduced opacity */

  /* ---- HVACR palette ---- */
  --hvacr-bg:             #f5f0e6;
  --hvacr-nav-bg:         #ffffff;
  --hvacr-red:            #c0210e;
  --hvacr-silver:         #7a8696;
  --hvacr-silver-light:   #c9d0da;
  --hvacr-text:           #1a1a2e;
  --hvacr-text-sub:       #4a5568;
  --hvacr-texture-stripe: rgba(180, 165, 140, 0.07); /* diagonal background texture */

  /* ---- Main site overlay palette ---- */
  --overlay-card-bg:       rgba(8, 4, 22, 0.72);
  --overlay-card-border:   rgba(255, 255, 255, 0.12);
  --overlay-text:          #f0eef8;
  --overlay-text-dim:      rgba(240, 238, 248, 0.65);
  --overlay-accent:        #0077ff;
  --overlay-accent-hover:  #7b9eff;
  --overlay-accent-faint:  rgba(155, 89, 247, 0.18); /* accent hue at very low opacity */
  --overlay-nav-bg:        rgba(8, 4, 22, 0.55);
  --overlay-dropdown-bg:   rgba(18, 8, 38, 0.96);    /* desktop dropdown background */
  --overlay-mobile-nav-bg: rgba(8, 4, 22, 0.96);     /* mobile nav drawer background */
  --overlay-border-dim:    rgba(255, 255, 255, 0.25); /* soft glass-effect border */
  --overlay-border-mid:    rgba(255, 255, 255, 0.55); /* medium glass-effect border */
  --overlay-hover-bg:      rgba(255, 255, 255, 0.08); /* subtle hover background tint */
  --overlay-divider-faint: rgba(255, 255, 255, 0.06); /* barely-visible divider lines */

  /* ---- Spacing scale ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;

  /* ---- Border radius ---- */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-full: 9999px;
}