/*
 * variables.css — Design Tokens
 *
 * Updated by Claude in Phase 1 using values from DESIGN.md.
 * Change these to restyle the entire site — nothing else needs to change.
 *
 * Placeholder values below. Claude replaces these with real values from DESIGN.md.
 */

:root {

  /* ── Colors ──────────────────────────────────────────────────
     Update from DESIGN.md in Phase 1.
  */
  --color-primary:          #1A3C5E;   /* main brand — nav bg if dark, headings */
  --color-primary-dark:     #122a44;   /* hover / active state of primary */
  --color-primary-light:    #2a5a8e;   /* lighter tint for subtle accents */
  --color-secondary:        #E8530A;   /* CTA color — main action buttons */
  --color-secondary-dark:   #c44208;   /* hover state of secondary */
  --color-accent:           #F5A623;   /* phone numbers, stars, small highlights */
  --color-bg:               #FFFFFF;   /* page background */
  --color-surface:          #F8F9FA;   /* alternating section backgrounds */
  --color-surface-2:        #EFF1F5;   /* slightly darker surface for cards on surface bg */
  --color-text:             #1A1A1A;   /* primary body text */
  --color-text-secondary:   #555555;   /* secondary text, captions */
  --color-text-light:       #888888;   /* placeholders, disabled */
  --color-border:           #E0E4EA;   /* dividers, card borders */
  --color-white:            #FFFFFF;
  --color-black:            #000000;
  --color-overlay:          rgba(0, 0, 0, 0.55);  /* hero image overlay */

  /* Top bar and footer — usually darkest shade */
  --color-top-bar-bg:       #0D2235;
  --color-top-bar-text:     #B8CDDE;
  --color-footer-bg:        #0D2235;
  --color-footer-text:      #B8CDDE;

  /* ── Typography ──────────────────────────────────────────────
     Update font names from DESIGN.md.
     Add matching Google Fonts <link> to all HTML files.
  */
  --font-heading:         'Montserrat', 'Arial Black', sans-serif;
  --font-body:            'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-normal:   400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  /* ── Type Scale ──────────────────────────────────────────────
     Based on 16px root. Use clamp() in global.css for fluid headings.
  */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */

  /* ── Spacing Scale ───────────────────────────────────────────
     Multiples of 4px.
  */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout ──────────────────────────────────────────────────*/
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow:  800px;

  /* ── Border Radius ───────────────────────────────────────────
     Adjust to match DESIGN.md style (e.g. 0 = sharp, 16px = very rounded).
  */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ── Shadows ─────────────────────────────────────────────────*/
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.14);

  /* ── Transitions ─────────────────────────────────────────────*/
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;

  /* ── Z-index ─────────────────────────────────────────────────*/
  --z-header:    100;
  --z-dropdown:  200;
  --z-lightbox: 1000;

}