/* ============================================================
   Strike Wedge — Color tokens
   Two surfaces share one palette:
   • WEBSITE / brand  → beige + dark green (calm, premium, editorial)
   • TECH APPS        → black + orange (high-contrast HUD, on-course)
   Beige & green are primary. Black, orange, lilac are accents.
   ============================================================ */

:root {
  /* ---- Core brand ramp ---- */
  --sw-green: #10412E;        /* primary dark green */
  --sw-green-light: #1A5C40;  /* hover / lifted green */
  --sw-green-deep: #0B2E20;   /* deepest green, footers, shadows */

  --sw-beige: #EBEADC;        /* primary light surface */
  --sw-beige-warm: #E2E0CE;   /* warm beige, alt sections */

  --sw-orange: #E8692A;       /* action / energy (updated from toolkit #D07D4C) */
  --sw-orange-hover: #D45B20; /* pressed / hover orange */

  --sw-lilac: #D5B8F0;        /* soft accent, sparingly */

  --sw-ink: #2B2B2B;          /* near-black — TEXT ONLY, never a bg */
  --sw-black: #000000;        /* tech-app canvas */
  --sw-white: #FFFFFF;

  /* ---- Tech-app neutrals (HUD on black) ---- */
  --sw-slate: #2E2E2E;        /* "library" tile, neutral surface on black */
  --sw-hud-fill: rgba(0,0,0,0.5);     /* translucent card over camera/photo */
  --sw-hud-fill-soft: rgba(0,0,0,0.22);
  --sw-hud-border: rgba(255,255,255,0.12);
  --sw-hud-border-strong: rgba(255,255,255,0.2);

  /* ---- White alpha scale (labels/dividers on dark) ---- */
  --sw-on-dark: #FFFFFF;
  --sw-on-dark-80: rgba(255,255,255,0.80);
  --sw-on-dark-60: rgba(255,255,255,0.60);
  --sw-on-dark-55: rgba(255,255,255,0.55);
  --sw-on-dark-45: rgba(255,255,255,0.45);
  --sw-on-dark-32: rgba(255,255,255,0.32);
  --sw-on-dark-12: rgba(255,255,255,0.12);
  --sw-on-dark-06: rgba(255,255,255,0.06);

  /* ---- Green alpha scale (labels/borders on beige) ---- */
  --sw-on-light: var(--sw-green);
  --sw-on-light-80: rgba(16,65,46,0.80);
  --sw-on-light-70: rgba(16,65,46,0.70);
  --sw-on-light-40: rgba(16,65,46,0.40);
  --sw-on-light-20: rgba(16,65,46,0.20);
  --sw-on-light-15: rgba(16,65,46,0.15);
  --sw-on-light-10: rgba(16,65,46,0.10);

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */

  /* Website / brand light theme */
  --surface-page: var(--sw-beige);
  --surface-page-alt: var(--sw-beige-warm);
  --surface-card: rgba(255,255,255,0.70);
  --surface-card-solid: #FFFFFF;
  --surface-inverse: var(--sw-green);
  --text-strong: var(--sw-green);
  --text-body: var(--sw-on-light-80);
  --text-muted: var(--sw-on-light-70);
  --text-on-inverse: var(--sw-beige);
  --border-subtle: var(--sw-on-light-15);
  --border-strong: var(--sw-green);

  /* Action (shared) */
  --action: var(--sw-orange);
  --action-hover: var(--sw-orange-hover);
  --action-text: var(--sw-beige);
  --focus-ring: var(--sw-orange);

  /* Tech-app dark theme */
  --app-canvas: var(--sw-black);
  --app-tile-primary: var(--sw-green);
  --app-tile-action: var(--sw-orange);
  --app-tile-neutral: var(--sw-slate);
  --app-card: var(--sw-hud-fill);
  --app-card-border: var(--sw-hud-border);
  --app-text: var(--sw-on-dark);
  --app-label: var(--sw-on-dark-55);
  --app-accent: var(--sw-orange);
}