/* ============================================================
   SP DESIGN TOKENS — variables.css
   Source of truth for all colors, spacing, type, shadows.
   Import this first in every page.
   ============================================================ */

:root {

  /* ── BRAND COLORS (from SP Brand Guideline 2024) ── */
  --yellow:     #FFDE00;   /* SP Primary Yellow */
  --green:      #008551;   /* SP Primary Green  */
  --blue:       #1064A9;   /* SP Primary Blue   */
  --black:      #090909;   /* SP Primary Black  */

  /* ── DERIVED SHADES ── */
  --green-dark:  #005e39;
  --green-light: #00a862;
  --green-bg:    #E8F5EE;  /* light tint for badges */
  --blue-dark:   #0a4a7d;
  --blue-bg:     #E8F0F8;
  --yellow-dark: #e6c800;

  /* ── NEUTRALS ── */
  --white:      #ffffff;
  --off:        #F5F5F3;   /* section backgrounds */
  --gray:       #6B7280;   /* body text / subtitles */
  --gray-light: #9CA3AF;   /* muted labels */
  --light:      #E8EDF2;   /* borders / dividers */
  --light2:     #F0F0EE;   /* alternate off-white */

  /* ── TYPOGRAPHY ── */
  /* Official: Hurme Geometric Sans 3 — substitute: DM Sans */
  --font:       'DM Sans', sans-serif;

  --text-xs:    0.72rem;   /* labels, tags */
  --text-sm:    0.85rem;   /* nav, captions */
  --text-base:  0.95rem;   /* body text */
  --text-md:    1.05rem;   /* lead paragraphs */
  --text-lg:    1.2rem;
  --text-xl:    1.5rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   900;

  /* ── SPACING ── */
  --sp-xs:   0.5rem;
  --sp-sm:   1rem;
  --sp-md:   2rem;
  --sp-lg:   4rem;
  --sp-xl:   6rem;
  --sp-2xl:  8rem;

  /* ── LAYOUT ── */
  --nav-h:        72px;
  --max-w:        1280px;
  --content-pad:  4rem;    /* desktop side padding */

  /* ── RADIUS ── */
  --radius-sm: 2px;   /* buttons, cards — brand uses sharp corners */
  --radius-md: 6px;
  --radius-lg: 16px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.14);
  --shadow-green: 0 20px 60px rgba(0,133,81,0.20);
  --shadow-blue:  0 20px 60px rgba(16,100,169,0.25);

  /* ── TRANSITIONS ── */
  --ease: 0.22s ease;
  --ease-slow: 0.45s ease;

  /* ── LAYOUT ALIASES ──
     Pages use --pad and --radius; utilities.css uses --content-pad and --radius-sm.
     These aliases keep both naming conventions working from one source of truth.  */
  --pad:    4rem;  /* alias for --content-pad */
  --radius: 2px;   /* alias for --radius-sm   */

  /* ════════════════════════════════════════════════════════
     LIGHT THEME COLOR OVERRIDES — added in visual refinement v2
     These replace all dark/black section backgrounds.
     CHANGE BRAND COLOR HERE — edit these to shift themed sections.
     ════════════════════════════════════════════════════════ */

  /* Deep greens — used for: page heroes, leadership bg, ev section, story panel */
  /* CHANGE BRAND COLOR HERE → --green-deep is the main "dark green" replacement */
  --green-deep:  #00613c;
  --green-vivid: #007a4a;

  /* Deep navy blue — used for: footer, process section, CTA strip, contact sidebar */
  /* CHANGE BRAND COLOR HERE → --blue-deep controls all "dark blue" backgrounds */
  --blue-deep:   #0a3d6b;
}

  /* ════════════════════════════════════════════════════════
     BACKGROUND IMAGE PLACEHOLDERS
     Where images can replace color backgrounds:
     ─ Page heroes (all inner pages):  /src/assets/img/page-hero-bg.webp   1920×500px
     ─ Homepage hero right panel:      /src/assets/img/hero-station.webp   1000×900px
     ─ About story panel:              /src/assets/img/about-story.webp    900×700px
     ─ Leadership section:             /src/assets/img/leadership-bg.webp  1920×900px
     ─ Services process section:       /src/assets/img/process-bg.webp     1920×800px
     ─ EV section:                     /src/assets/img/ev-bg.webp          1920×700px
     ─ Contact sidebar:                /src/assets/img/contact-sidebar-bg.webp 700×900px
     ════════════════════════════════════════════════════════ */