/* ==========================================================================
   RIGHTO CLEANING SERVICES — DESIGN TOKENS
   --------------------------------------------------------------------------
   This is the ONLY file to edit at the branding phase.
   Change a value here and the whole site updates — no page needs touching.

   Branding checklist (later):
     1. COLOUR — set --accent to the chosen brand colour (one accent only).
     2. FONTS — set --font-display and --font-body (add @font-face or a
        font link in the <head> partial, then update the names here).
     3. LOGO — drop the final logo at assets/img/logo.svg (same filename);
        it replaces the text lockup automatically. Adjust --logo-height.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     1. COLOUR
     Brand palette (logo pack, July 2026): navy #01001c ink/accent/bands,
     cream #F3EFE6 paper, slate #6B7280 muted text. Accent (July 2026):
     bubblegum pink — #FF8FAE in logo artwork, H1s and on-navy accents;
     deepened to raspberry #C7295F for cream-side UI (AA contrast).
     ------------------------------------------------------------------ */
  --ink:        #01001c;   /* brand navy — headlines, body text */
  --ink-soft:   #6b7280;   /* muted slate (brand palette) — sublines, captions, meta */
  --paper:      #f3efe6;   /* brand cream — page background */
  --surface:    #ffffff;   /* cards / raised panels */
  --line:       #e3ddcd;   /* hairline borders, dividers (cream, darkened) */

  --accent:       #C7295F; /* deep bubblegum raspberry — on cream 4.68:1 (AA): buttons, ticks, links */
  --accent-hover: #A61E4D; /* darker raspberry — hover; on cream 6.28:1, white text on it 7.21:1 */
  --on-accent:    #ffffff; /* white label on the accent button = 5.41:1, passes normal text */
  --accent-on-navy: #FF8FAE; /* bubblegum — logo star, H1s, accents on navy; 9.62:1 on navy */

  --band:       #01001c;   /* dark full-width sections (closing CTA band) */
  --on-band:    #f3efe6;   /* text on dark bands */

  --focus-ring: #01001c;   /* keyboard focus outline (keep high contrast) */

  /* ------------------------------------------------------------------
     2. TYPE
     Brand fonts (July 2026): Fraunces display, Hanken Grotesk body.
     Loaded via Google Fonts links in every page head (_build-scripts/add_fonts.py).
     Display = headlines (big, tight, bold). Body = comfortable reading.
     ------------------------------------------------------------------ */
  --font-title:   "Oswald", "Arial Narrow", sans-serif; /* H1s + big row titles — echoes the logo subheading caps */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --weight-display: 800;
  --weight-heading: 700;
  --weight-semibold: 600;
  --weight-body: 400;

  /* Fluid type scale — mobile-first, grows smoothly to desktop */
  --text-hero:  clamp(3rem, 8.5vw + 0.5rem, 5.75rem);    /* H1 hero */
  --text-h1:    clamp(2.5rem, 7vw + 0.5rem, 4.5rem);     /* page H1 */
  --text-h2:    clamp(1.9rem, 4vw + 0.5rem, 3.1rem);     /* section H2 */
  --text-h3:    clamp(1.35rem, 1.8vw + 0.6rem, 1.75rem);
  --text-lead:  clamp(1.2rem, 1.2vw + 0.9rem, 1.5rem);   /* hero subline */
  --text-body:  1.125rem;
  --text-small: 0.95rem;

  --leading-tight: 1.05;   /* headlines */
  --leading-snug:  1.25;   /* subheads */
  --leading-body:  1.65;   /* paragraphs */

  --tracking-tight: -0.025em;  /* big headlines pull in */
  --tracking-caps:   0.08em;   /* small uppercase labels spread out */

  /* ------------------------------------------------------------------
     3. SPACING (8px base scale)
     ------------------------------------------------------------------ */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* Generous whitespace between page sections, scales with screen */
  --section-pad: clamp(4.5rem, 11vw, 8.5rem);

  /* ------------------------------------------------------------------
     4. LAYOUT
     ------------------------------------------------------------------ */
  --width-content: 1280px;  /* max page width */
  --width-text:    680px;   /* comfortable reading measure */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);  /* side padding */

  /* ------------------------------------------------------------------
     5. SHAPE — flat and clean; no heavy shadows or gradients
     ------------------------------------------------------------------ */
  --radius-button: 999px;   /* confident pill buttons */
  --radius-card:   10px;
  --radius-field:  8px;     /* form inputs */
  --border-width:  2px;     /* outline buttons, emphasis borders */

  /* ------------------------------------------------------------------
     6. BUTTONS
     ------------------------------------------------------------------ */
  --btn-pad-y: 0.9em;
  --btn-pad-x: 1.9em;
  --btn-text:  1rem;

  /* ------------------------------------------------------------------
     7. MOTION — subtle and purposeful
     ------------------------------------------------------------------ */
  --dur:  180ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* confident deceleration (motion layer) */

  /* ------------------------------------------------------------------
     8. LOGO
     Until the real logo exists, the header renders a text lockup:
     "Righto" large + "Cleaning Services" small (styled in main.css).
     ------------------------------------------------------------------ */
  --logo-height: clamp(46px, 6vw, 64px);
}