/* ============================================================
   RPS Construction — Design Tokens
   SITE-PLAN.md Section 2 — final token sheet
   All colors, spacing, radii, motion exist ONLY as CSS variables.
   No raw hex in component CSS.
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  --c-bg:            #ffffff;   /* global background           */
  --c-band:          #f8fafc;   /* alternate section bands     */
  --c-surface-card:  #ffffff;   /* cards (floating, soft shadow) */
  --c-text:          #262626;   /* primary text (AA on white)  */
  --c-muted:         #7a7a7a;   /* secondary text / metadata   */
  --c-muted-strong:  #333333;   /* tertiary text               */
  --c-brand:         #2e358e;   /* links, active nav, accents  */
  --c-brand-hover:   #c2410c;   /* brand hover → orange        */
  --c-cta:           #ea580c;   /* primary buttons / CTA       */
  --c-cta-hover:     #c2410c;   /* CTA hover                   */
  --c-border:        #e2e8f0;   /* hairlines, table borders    */
  --c-input-bg:      #f8fafc;   /* form field backgrounds      */
  --c-bottom-bar:    #f7f7f7;   /* footer bottom bar           */
  --c-row-alt:       #fdfdfd;   /* alternating spec-table rows */
  --c-surface-ash:   #eef1f5;   /* accordion open panel fill (light ash) */
  --swatch-white:    #ffffff;   /* panel color: white          */
  --swatch-cream:    #f2ead0;   /* panel color: cream          */
  --swatch-blue:     #2e358e;   /* panel color: blue           */
  --swatch-red:      #c53131;   /* panel color: red            */
  /* Cross-section diagram palette */
  --c-skin-steel:    #cbd5e1;   /* steel skin fill             */
  --core-eps:        #dbe7f5;   /* EPS core fill               */
  --core-pu:         #cfd8dc;   /* PU core fill                */
  --core-rockwool:   #c8a58b;   /* Rockwool core fill          */
  --c-success:       #059669;   /* form success / valid        */
  --c-error:         #dc2626;   /* form error outline + msg    */
  --c-focus:         #2e358e;   /* 2px focus-visible ring      */
  --c-on-cta:        #ffffff;   /* text + icon on CTA buttons  */
  --c-brand-glow:    rgba(46, 53, 142, 0.1);  /* decorative glows       */
  --c-cta-glow:      rgba(234, 88, 12, 0.12);
  --c-band-dark:     #171d4a;   /* recent-works navy band       */
  --c-on-band-dark:  #ffffff;   /* text on navy band            */
  --c-brand-ghost:   #aab4ff;   /* kicker text on navy band     */

  /* ---------- Glass surfaces (scoped — never text-on-glass) ---------- */
  --glass-nav:        #ffffff;
  --glass-nav-blur:   12px;
  --glass-overlay:    rgba(255, 255, 255, 0.72);
  --glass-overlay-blur: 8px;
  --glass-chip:       rgba(255, 255, 255, 0.6);
  --glass-chip-blur:  6px;

  /* ---------- Spacing scale ---------- */
  --space-1: 10px;
  --space-2: 12.5px;
  --space-3: 13px;
  --space-4: 14.4px;
  --space-5: 15px;
  --space-6: 20px;
  --space-7: 30px;
  --space-8: 100px;   /* section gutters */

  /* ---------- Typography ---------- */
  --ff-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-headings: "Plus Jakarta Sans", "Space Grotesk", system-ui, sans-serif;
  --fs-xs:   16px;
  --fs-sm:   18px;
  --fs-md:   20px;
  --fs-lg:   24px;
  --fs-xl:   30px;
  --fs-2xl:  40px;   /* hero, mobile */
  --fs-3xl:  56px;   /* hero, desktop */
  --fs-base: 16px;
  --lh-base: 1.5;

  /* ---------- Radius / Shadows ---------- */
  --r-pill:   50px;
  --r-card:   10px;
  --r-input:  12px;
  --shadow-card:       0 4px 40px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 48px rgba(0, 0, 0, 0.1);

  /* ---------- Motion ---------- */
  --dur-instant: 200ms;
  --dur-fast:    300ms;
  --dur-normal:  400ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Focus ring (global) ---------- */
  --focus-ring: 2px solid var(--c-focus);
  --focus-offset: 2px;

  /* ---------- Breakpoints ---------- */
  --bp-mobile:  375px;
  --bp-tablet:  768px;
  --bp-laptop:  1024px;
  --bp-desktop: 1440px;
}