/* ==========================================================================
   REMEDY RESTORATIONS — DESIGN TOKENS
   --------------------------------------------------------------------------
   This is the single source of truth for colour, type and spacing across the
   website, the brochure and the email signature.

   >>> HOW TO ADD BRAND COLOUR WHEN THE LOGO ARRIVES <<<
   Change ONLY the four values in the "BRAND SLOTS" block below. Nothing else
   in this file or any other file needs to be touched. Every button, rule,
   heading accent and panel will follow.

   The system is currently built in greyscale on purpose. Greyscale forces the
   hierarchy to be carried by type, weight, rules and surface tone — so when
   colour is introduced it reads as deliberate emphasis rather than decoration.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     NEUTRAL RAMP  (do not change — this is the structural greyscale)
     ------------------------------------------------------------------ */
  --ink-900: #12161A;   /* deepest — hero panels, primary text            */
  --ink-800: #1C2228;   /* dark surfaces, footer                          */
  --ink-700: #2A323A;   /* strong UI, secondary dark surfaces             */
  --ink-600: #3D4750;   /* headings on light                              */
  --ink-500: #5A656F;   /* body text muted — 5.6:1 on white, AA pass      */
  --ink-400: #7C868F;   /* LARGE TEXT / borders only — 3.5:1, not AA body */
  --ink-300: #A8B1B8;   /* decorative rules on dark                       */
  --ink-200: #D2D8DC;   /* borders                                        */
  --ink-100: #E8ECEF;   /* hairlines, dividers                            */
  --ink-050: #F4F6F8;   /* alternating section surface                    */
  --white:   #FFFFFF;

  /* ------------------------------------------------------------------
     BRAND SLOTS  —  LIVE. Sampled from the supplied logo artwork.
     ------------------------------------------------------------------
     Any replacement must keep its paired text colour at 4.5:1 or better.
     Verified: white on --brand = 13.9:1 · navy on --accent = 8.4:1.
     ------------------------------------------------------------------ */
  --brand:        #012B53;  /* deep navy — wordmark, dark surfaces        */
  --brand-deep:   #001B36;  /* darker navy — gradients, footer            */
  --brand-bright: #00559A;  /* mid blue — from the roof graphic           */
  --brand-sky:    #2DAEF8;  /* light blue — droplet highlight, sparingly  */
  --accent:       #FEBD01;  /* gold — emphasis rules, the emergency CTA   */
  --emergency:    #FEBD01;  /* the 24/7 call button, on light surfaces    */

  /* The emergency button also appears on DARK panels (hero, CTA band). Gold
     works on both, so these now match --emergency. */
  --emergency-on-dark: #FEBD01;

  /* Text colour that sits ON the slots above. Gold is a light colour, so the
     text on it is navy, not white. */
  --on-brand:          #FFFFFF;
  --on-accent:         #012B53;
  --on-emergency:      #012B53;
  --on-emergency-dark: #012B53;

  /* ------------------------------------------------------------------
     SEMANTIC SURFACES
     ------------------------------------------------------------------ */
  --surface:       var(--white);
  --surface-alt:   var(--ink-050);
  --surface-dark:  var(--brand-deep);   /* dark panels are navy, not black */
  --line:          var(--ink-200);
  --line-soft:     var(--ink-100);
  --line-dark:     rgba(255,255,255,.16);

  --text:          var(--ink-900);
  --text-body:     var(--ink-600);
  --text-muted:    var(--ink-500);
  --text-on-dark:  rgba(255,255,255,.92);
  --text-on-dark-muted: rgba(255,255,255,.68);

  --focus: #2A6FDB;         /* focus ring — intentionally non-brand so it
                               stays visible whatever the brand becomes  */

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------
     Archivo  — headings. A grotesque with tight, engineered proportions.
                Reads as competent and industrial rather than salesy.
     Inter    — body. Exceptional legibility at small sizes, and a tabular
                numeral set that keeps licence numbers and phone numbers
                aligned in tables.
     Both are SIL Open Font Licence — free for commercial use, self-hosted
     here so the site has zero third-party dependencies.
     ------------------------------------------------------------------ */
  --font-head: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --t-hero:   clamp(2.15rem, 1.35rem + 3.4vw, 4rem);
  --t-h2:     clamp(1.6rem,  1.2rem + 1.7vw,  2.5rem);
  --t-h3:     clamp(1.15rem, 1.02rem + .5vw,  1.4rem);
  --t-lead:   clamp(1.05rem, .98rem + .35vw,  1.25rem);
  --t-body:   1rem;
  --t-small:  .875rem;
  --t-micro:  .75rem;

  --track-tight: -.022em;   /* headings */
  --track-wide:  .13em;     /* eyebrow / label caps */

  /* ------------------------------------------------------------------
     SPACE, RADIUS, MOTION
     ------------------------------------------------------------------ */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 5.5rem;  --s-10: 7rem;

  --wrap: 1180px;           /* max content width */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --r-sm: 3px;              /* deliberately restrained. Heavy rounding
                               reads consumer; this audience is not.     */
  --r-md: 5px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18,22,26,.06);
  --shadow-md: 0 4px 16px rgba(18,22,26,.08);
  --shadow-lg: 0 18px 48px rgba(18,22,26,.14);

  --ease: cubic-bezier(.2,.7,.3,1);
}