/* ===========================================================================
   MOTORLY — BRAND LAYER (working name)
   Everything brand-specific lives here plus js/brand.js. To rebrand:
     1. change the tokens below
     2. change BRAND in js/brand.js (name, strapline, logo mark, contact)
   No other file hard-codes a colour or the product name.
   =========================================================================== */
:root {
  /* --- Palette ------------------------------------------------------------ */
  --brand-green-900: #06251b;
  --brand-green-800: #0b3527;
  --brand-green-700: #0e3b2c;
  --brand-green:     #114634;   /* deep British racing green — principal colour */
  --brand-green-600: #1a5c45;
  --brand-green-500: #2a7358;
  --brand-green-100: #dbe9e2;
  --brand-green-050: #eef5f1;

  --brand-lime:      #b6e622;   /* fresh lime accent */
  --brand-lime-600:  #9fce12;
  --brand-lime-100:  #eef8cd;

  --paper:           #faf7f0;   /* warm off-white page background */
  --paper-2:         #f4efe4;   /* warm secondary surface */
  --surface:         #ffffff;
  --ink:             #23272b;   /* charcoal body text */
  --ink-2:           #4d545b;
  --ink-3:           #646c74;   /* meets 4.5:1 on the warm off-white background */
  --line:            #e2ddd1;
  --line-2:          #cfc9ba;

  --ok:      #1f7a4d;
  --ok-bg:   #e4f3ea;
  --warn:    #9a6106;
  --warn-bg: #fbf0d8;
  --bad:     #a32020;
  --bad-bg:  #fae7e5;
  --info:    #15556e;
  --info-bg: #e2eff4;

  /* --- Type --------------------------------------------------------------- */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.8125rem;   /* 13px — smallest permitted */
  --fs-sm: 0.9063rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.6rem;
  --fs-4xl: 3.35rem;

  /* --- Shape & space ------------------------------------------------------ */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --shadow-sm: 0 1px 2px rgba(17, 70, 52, .06), 0 1px 3px rgba(17, 70, 52, .05);
  --shadow: 0 2px 6px rgba(17, 70, 52, .07), 0 8px 24px rgba(17, 70, 52, .06);
  --shadow-lg: 0 10px 40px rgba(17, 70, 52, .13);
  --focus: 0 0 0 3px var(--brand-lime), 0 0 0 5px var(--brand-green);
  --maxw: 1180px;
}