/* ============================================================
   Design Tokens — single source of truth for all brand styles
   Edit here to update colours, typography, and spacing globally.
   Exempt individual CSS files by not referencing these variables.
   ============================================================ */

:root {

  /* ── Morning Fog Brand Palette (Sherwin Williams) ──────── */
  --brand-platinum:         #DEE0E2;   /* Lightest — backgrounds, borders     */
  --brand-dim-gray:         #918E88;   /* Mid-light — secondary text, muted   */
  --brand-slate-gray:       #68717A;   /* Mid — primary CTAs, active nav      */
  --brand-battleship-gray:  #878F82;   /* Mid-warm — hover states             */
  --brand-black-olive:      #3D4339;   /* Darkest — headings, footers, accent */

  /* ── Brand variable aliases (used throughout CSS files) ── */
  --brand-green-dark:       var(--brand-slate-gray);
  --brand-green-mid:        var(--brand-battleship-gray);
  --brand-green-light:      var(--brand-dim-gray);
  --brand-accent:           var(--brand-black-olive);

  /* ── Neutral Palette ────────────────────────────────────── */
  --neutral-black:          #000000;
  --neutral-900:            #1c1c1c;   /* Near-black, admin text              */
  --neutral-800:            #222222;   /* Very dark headings (about page)     */
  --neutral-700:            #333333;   /* Dark body text                      */
  --neutral-600:            #444444;
  --neutral-500:            #555555;
  --neutral-400:            #666666;   /* Standard body text, table headers   */
  --neutral-300:            #999999;   /* Muted / secondary text              */
  --neutral-200:            #d9d9d9;   /* Placeholder backgrounds             */
  --neutral-100:            #e0e0e0;   /* Borders                             */
  --neutral-50:             #f8f8f8;   /* Light page background               */
  --neutral-white:          #ffffff;

  /* ── Status Colors ──────────────────────────────────────── */
  --status-success-bg:      #d4edda;
  --status-success-text:    #155724;
  --status-success-fg:      #28a745;
  --status-danger-bg:       #fde8e8;
  --status-danger-text:     #b91c1c;
  --status-danger-border:   #f5c6cb;
  --status-inactive:        #6c757d;

  /* ── Overlays ───────────────────────────────────────────── */
  --overlay-banner:         rgba(104, 113, 122, 0.70); /* Home video banner — Slate Gray  */
  --overlay-cta:            rgba(0, 0, 0, 0.60);       /* CTA section card  */

  /* ── Focus Ring ─────────────────────────────────────────── */
  --focus-ring:             #258cfb;

  /* ── Typography ─────────────────────────────────────────── */
  --font-family-brand:      'Montserrat', sans-serif;

  /* Headings */
  --heading-family:         'Montserrat', sans-serif;
  --heading-style:          normal;
  --heading-weight:         500;
  --heading-line-height:    1.2em;
  --heading-letter-spacing: -0.02em;
  --h1-size:                4rem;
  --h2-size:                2.8rem;
  --h3-size:                2.2rem;
  --h4-size:                1.3rem;

  /* Paragraphs */
  --body-family:            'Montserrat', sans-serif;
  --body-weight:            400;
  --body-line-height:       1.5em;
  --body-letter-spacing:    0em;
  --p1-size:                1.4rem;
  --p2-size:                1rem;
  --p3-size:                0.9rem;

  --font-size-xs:           0.70rem;   /* ~11px — labels, badges, all-caps    */
  --font-size-sm:           0.875rem;  /* ~14px — secondary / meta text       */
  --font-size-base:         1rem;      /* 16px                                */
  --font-size-lg:           1.125rem;  /* ~18px                               */

  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;

  --line-height-tight:      1.3;
  --line-height-base:       1.6;
  --line-height-relaxed:    1.75;

  /* ── Section Spacing ────────────────────────────────────── */
  --section-spacing:        100px;    /* Responsive — see media queries below */

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              10px;
  --radius-xl:              12px;

  /* ── Border Colors ──────────────────────────────────────── */
  --border-color:           #e0e0e0;
  --border-color-subtle:    rgba(0, 0, 0, 0.10);
  --border-color-mid:       rgba(0, 0, 0, 0.15);

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-card:            0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-card-hover:      0 6px 20px rgba(0, 0, 0, 0.18);
  --shadow-subtle:          0 2px 12px rgba(0, 0, 0, 0.06);

}

/* ── Responsive Section Spacing ─────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-spacing: 70px; }
}
@media (max-width: 768px) {
  :root { --section-spacing: 50px; }
}