/* ═══════════════════════════════════════════════════════════════════
   hometheaterinstallers.net — Design Tokens
   Single source of truth. Every value used in the site comes from here.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Spacing scale (8pt grid) ──────────────────────────────────────
     Every margin, padding, and gap uses one of these values.
     Never use a value not on this scale.
     --space-1 = 8px (tight: icon gap, chip padding)
     --space-2 = 16px (component internal padding)
     --space-3 = 24px (section internal padding)
     --space-4 = 32px (section gap)
     --space-5 = 48px (large section separation)
     --space-6 = 64px (page-level section gap)
  */
  --space-half: 4px;
  --space-1:    8px;
  --space-2:    16px;
  --space-3:    24px;
  --space-4:    32px;
  --space-5:    48px;
  --space-6:    64px;

  /* ── Border radius scale ───────────────────────────────────────────
     Three values only. Use nothing else.
     --radius-sm  = tags, badges, chips, inline code
     --radius-md  = buttons, inputs, small cards
     --radius-lg  = large cards, modals, image containers
  */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Pill = 999px. Used only for rating chips and open/closed badges.
     Not a variable — write 999px explicitly so intent is clear. */

  /* ── Type scale ────────────────────────────────────────────────────
     All sizes in rem. Base = 16px (browser default).
     Never introduce a font-size not on this scale.
  */
  --text-xs:   0.75rem;    /* 12px — labels, legal, micro-copy */
  --text-sm:   0.875rem;   /* 14px — secondary body, meta, captions */
  --text-base: 1rem;       /* 16px — primary body text */
  --text-md:   1.125rem;   /* 18px — prominent body text */
  --text-lg:   1.25rem;    /* 20px — card titles and supporting copy */
  --text-xl:   1.875rem;   /* 30px — mobile section headings */
  --text-2xl:  2.25rem;    /* 36px — mobile page headings */
  --text-3xl:  3rem;       /* 48px — desktop page and mobile hero headings */
  --text-4xl:  3.75rem;    /* 60px — desktop homepage hero */

  /* ── Font weights — aligned with Astrowind ──────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Line heights ──────────────────────────────────────────────────
     Tight for headings, comfortable for body, generous for small text.
  */
  --leading-display:1;     /* homepage hero */
  --leading-tight:  1.05;  /* page headings */
  --leading-heading:1.2;   /* mobile section headings */
  --leading-heading-desktop:1.111; /* 36px heading on a 40px line */
  --leading-snug:   1.4;   /* card titles, supporting copy */
  --leading-normal: 1.5;   /* body text */
  --leading-relaxed:1.7;   /* review text, long-form */

  /* ── Transition ────────────────────────────────────────────────────
     One duration for UI interactions (hover, focus).
     One duration for structural changes (opening, closing).
     Never use any other value.
  */
  --transition-ui:  150ms ease;   /* hover color, border change */
  --transition-move: 220ms ease;  /* position, size change */

  /* ── Shadows ───────────────────────────────────────────────────────
     One shadow level only. No glow. No aggressive lift.
     Used sparingly — featured card only, not every card.
  */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

  /* ── Z-index scale ─────────────────────────────────────────────────
  */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;

  /* ── Max content widths ────────────────────────────────────────────
  */
  --width-content:   680px;  /* prose, narrow content */
  --width-container: 1120px; /* page container */
  --width-wide:      1280px; /* homepage, full-bleed sections */

  /* Semantic colors — used for specific UI functions only */
  --color-action-call:        #085041; /* call button text */
  --color-action-call-bg:     #E1F5EE; /* call button background */
  --color-action-call-border: #9FE1CB;
  --color-action-call-hover:  #9FE1CB;

  --color-action-map:         #0C447C;
  --color-action-map-bg:      #E6F1FB;
  --color-action-map-border:  #85B7EB;
  --color-action-map-hover:   #B5D4F4;

  --color-brand-chip-text:    #0C447C;
  --color-brand-chip-bg:      #E6F1FB;
  --color-brand-chip-border:  #85B7EB;

  --color-rating:             #BA7517; /* star color */

  --color-status-open:        #27500A;
  --color-status-open-bg:     #EAF3DE;
  --color-status-open-border: #C0DD97;
  --color-status-closed:      #791F1F;
  --color-status-closed-bg:   #FCEBEB;
  --color-status-closed-border:#F09595;
}