/* ============================================================================
   Builds by Leo — design tokens
   ----------------------------------------------------------------------------
   TWO SEPARATE TOKEN SETS LIVE IN THIS FILE. Do not mix them.

   1. STUDIO TOKENS (--bg, --accent, …)
      Builds by Leo's own dark brand. Use on ANY surface a PROSPECT or the
      BUSINESS OWNER sees: the marketing site, tool chrome, builder/admin
      dashboards. This is the recognisable "developer studio" look.

   2. WHITE-LABEL BRAND TOKENS (--brand-*)
      A neutral, professional LIGHT theme. Use on ANY surface a CLIENT'S OWN
      CUSTOMER sees: quote pages, booking pages, job progress portals. These
      carry the CLIENT'S identity, never ours. Override the --brand-* values
      per client; never expose the dark studio look to an end customer.

   See CLAUDE.md §4 for the full rationale.
   ============================================================================ */


/* ============================================================================
   1. STUDIO TOKENS — Builds by Leo dark brand (prospect / owner facing)
   ============================================================================ */
:root {
  /* --- Colour ------------------------------------------------------------ */
  --bg:      #0B0E12;   /* near-black, slight blue cast — page background     */
  --bar:     #141A21;   /* panel / raised surface                            */
  --edge:    #242D36;   /* borders, hairlines                                */
  --dot:     #191D24;   /* background dot grid                               */
  --text:    #F2F4F7;   /* primary text                                      */
  --muted:   #A7B4C0;   /* secondary text                                    */
  --dim:     #5B6B77;   /* tertiary, captions                                */
  --accent:  #22D3EE;   /* cyan — the ONE accent colour. Do not add others.  */
  --ok:      #28C840;   /* success                                           */
  --warn:    #FEBC2E;   /* warning                                           */
  --bad:     #FF5F57;   /* error / destructive                              */

  /* --- Type families ----------------------------------------------------- */
  /* IBM Plex Mono: headings, labels, data, UI chrome.                       */
  /* IBM Plex Sans: body copy longer than a sentence.                        */
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* --- Type scale (1.20 minor-third, 16px base) -------------------------- */
  --text-xs:   0.694rem;  /* ~11px — captions, legal small print            */
  --text-sm:   0.833rem;  /* ~13px — labels, secondary UI                    */
  --text-base: 1rem;      /* 16px  — body                                    */
  --text-md:   1.2rem;    /* ~19px — lead paragraph, small headings          */
  --text-lg:   1.44rem;   /* ~23px — h3                                       */
  --text-xl:   1.728rem;  /* ~28px — h2                                       */
  --text-2xl:  2.074rem;  /* ~33px — h1                                       */
  --text-3xl:  2.488rem;  /* ~40px — hero                                     */
  --text-4xl:  2.986rem;  /* ~48px — big display / stat numbers              */

  --leading-tight: 1.15;  /* headings                                        */
  --leading-body:  1.6;   /* body copy                                       */

  /* Uppercase micro-labels get generous letterspacing (see CLAUDE.md §4).   */
  --tracking-label: 0.12em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-12: 4.5rem;

  /* --- Shape ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;   /* default panel radius                               */
  --radius-lg: 14px;  /* the browser-window frame device                   */
  --radius-pill: 999px;

  /* Hairline borders, not heavy ones.                                       */
  --border: 1px solid var(--edge);

  /* The only shadow permitted: a subtle lift on floating panels.            */
  --lift: 0 8px 30px rgba(0, 0, 0, 0.35);

  /* Dot-grid background, ~3mm spacing. Apply as background on --bg surfaces. */
  --dot-grid:
    radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 12px 12px;
}


/* ============================================================================
   2. WHITE-LABEL BRAND TOKENS — neutral light theme (customer facing)
   ----------------------------------------------------------------------------
   Defaults below are intentionally plain and trustworthy — what a roofer's
   customer should see on a quote, NOT a portfolio look. Override per client:

     .quote-page { --brand-primary: #7A1E2B; --brand-radius: 4px; }

   Only these five tokens (plus the neutrals) are the swap surface. Keep the
   set small so re-skinning per client stays a one-line change.
   ============================================================================ */
:root {
  /* --- The five swappable client tokens (CLAUDE.md §4) ------------------- */
  --brand-primary: #3D5A73;  /* neutral slate blue — buttons, accents, links */
  --brand-bg:      #F5F6F8;  /* page background — soft off-white              */
  --brand-text:    #1B2229;  /* primary text — near-black, readable          */
  --brand-surface: #FFFFFF;  /* cards, panels, the quote/booking sheet        */
  --brand-radius:  8px;      /* corner radius — some clients want sharp, some soft */

  /* --- Derived / supporting neutrals (rarely need per-client change) ----- */
  --brand-muted:   #5C6773;  /* secondary text, labels                        */
  --brand-dim:     #8A96A3;  /* captions, timestamps                          */
  --brand-edge:    #E1E5EA;  /* hairline borders, table rules                 */
  --brand-primary-contrast: #FFFFFF;  /* text on --brand-primary fills        */

  /* Status colours tuned for a LIGHT background (the studio ones are for dark). */
  --brand-ok:   #1F7A33;
  --brand-warn: #B8860B;
  --brand-bad:  #C0392B;

  /* --- Type: reuse the same open-licence families, lighter default weight - */
  --brand-font-heading: var(--font-mono);
  --brand-font-body:    var(--font-sans);

  /* --- Shape / lift on the light theme ---------------------------------- */
  --brand-border: 1px solid var(--brand-edge);
  --brand-lift:   0 2px 12px rgba(27, 34, 41, 0.08);
}


/* ============================================================================
   Accessibility — respected everywhere (CLAUDE.md §5)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}