/* DS Mini Storage -- design tokens. FILLED IN, run D1, 22 Aug 2026.
 *
 * ============================================================
 *  PALETTE SOURCE: the client's own materials, not invented.
 * ============================================================
 *
 * Navy (--color-navy, #2f455e) appears 57 times on the old site (P0
 * excavation) -- it is unambiguously theirs, carrying every heading,
 * every button, every rule line. It is also the exact colour on the
 * real building sign (assets/img/IMG_0281.webp) -- this is not a
 * palette invented from a brand-personality quiz, it is the paint
 * already on the wall.
 *
 * Orange (--color-accent, #ff9211) exists on the old site too, but
 * only on link hover -- a warm accent the old site had and buried.
 * Used here the way it was clearly meant to be used: sparingly,
 * deliberately, one attention point per viewport (primary CTA, the
 * count-you-can-trust in pricing), never as a background wash.
 *
 * Every text-on-background pairing below is WCAG-verified, not
 * eyeballed -- computed with the standard relative-luminance formula,
 * not read off a browser devtool at one zoom level. See the run file
 * (ws-docs/runs/2026-08-22-pilot-d1-design.md) for the full pairing
 * table and the script that produced it.
 */

:root {

  /* -- COLOUR: base surfaces and text -------------------------------- */
  --color-bg:            #ffffff;
  --color-surface:       #f4f6f8;   /* alternating-section tint, cool-grey off navy */
  --color-text:          #1c2b3a;   /* near-black, navy-family -- 14.42:1 on bg */
  --color-text-muted:    #55606b;   /*  6.42:1 on bg,  5.92:1 on surface */
  --color-border:        #d7dde3;   /* decorative only -- see note below */

  /* -- COLOUR: brand ---------------------------------------------------
   * Navy carries structure and authority: header, footer, the CTA
   * section's bookend background, every button's resting state.
   */
  --color-navy:          #2f455e;
  --color-navy-dark:     #233346;   /* hover/active state, same hue, darker */
  --color-navy-text:     #ffffff;   /*  9.84:1 on --color-navy */
  --color-navy-muted:    #aab6c2;   /*  4.77:1 on --color-navy -- secondary text on navy */

  /* -- COLOUR: accent ----------------------------------------------------
   * Orange is a FILLED-BACKGROUND colour here, not a foreground one.
   * White text on it fails AA outright (2.24:1) and even navy text
   * fails at body size (4.39:1, needs 4.5). Near-black passes clean
   * (6.44:1), so --color-accent-text is always the near-black body
   * colour, never white, whenever accent is the background.
   * Bare orange AS a foreground (small text, thin icon strokes, a
   * focus ring) on a light background fails even the 3:1 UI-component
   * floor (2.24:1) -- so orange never carries meaning on its own as a
   * thin line or small glyph; it is a fill, or it is large/bold enough
   * to read as a graphical block rather than text.
   */
  --color-accent:        #ff9211;
  --color-accent-dark:   #e07c00;   /* hover/active state for accent fills */
  --color-accent-text:   #1c2b3a;   /*  6.44:1 on --color-accent */

  /* Focus ring. Verified 9.84:1 against --color-bg AND --color-navy
   * (white also verified 9.84:1 on navy) -- see .site-header /
   * .site-cta overrides below for the navy-background swap. Orange was
   * considered and rejected for this: 2.24:1 against white fails even
   * the 3:1 non-text floor a focus indicator needs.
   */
  --color-focus:         #2f455e;
  --color-focus-on-navy: #ffffff;

  /* -- TYPE --------------------------------------------------------------
   * SYSTEM STACK, DELIBERATELY, NOT MONTSERRAT. The old site downloads
   * Montserrat and never applies it anywhere -- dead weight, not
   * intent realised. Self-hosting it here would mean shipping font
   * files, a licence question, and real page weight for a business
   * whose entire competitive edge (per this run's own brief) is being
   * fast and honest. A native OS stack costs nothing over the wire,
   * never flashes invisible text, and every platform's own system font
   * (San Francisco, Segoe UI, Roboto) is already a considered,
   * highly-legible face -- this is the "choose better" branch, not the
   * cheap one. Personality lives in size/weight/spacing at the display
   * sizes instead of in an imported family, per the brief's own split
   * (readability in body, personality in display).
   */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial,
                  sans-serif;
  --font-heading: var(--font-body); /* same stack; differentiated by weight/size/spacing only */

  /* 16px floor, not a placeholder -- accessibility floor from the
   * standard. Never goes down; may go up per site (it does not here --
   * 16px reads comfortably at this line-height for a considered
   * reader, and there is no reason to push past the floor). */
  --font-size-base:      16px;
  --line-height-base:    1.6;   /* generous, for a reader making a decision, not skimming */

  /* Real modular scale, ~1.25 (major third) off the 16px base, not
   * arbitrary sizes. Display sizes use clamp() further down so they
   * respond fluidly between phone and desktop without a breakpoint
   * fork for every size. */
  --font-size-sm:        0.875rem;   /* 14px -- meta text, last-updated line */
  --font-size-md:        1.125rem;   /* 18px -- lede paragraphs, answer text */
  --font-size-lg:        1.375rem;   /* 22px -- h3 / swarm questions */
  --font-size-xl:        clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);   /* h2 */
  --font-size-2xl:       clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);   /* h1 */

  --font-weight-heading: 700;
  --letter-spacing-heading: -0.01em;   /* slightly tightened at display sizes only */

  /* -- SPACING -------------------------------------------------------
   * Real, varied spacing -- uniform spacing everywhere is one of the
   * design standard's named signatures of generated output (rule 7).
   */
  --space-xs:            0.5rem;
  --space-sm:            1rem;
  --space-md:            1.5rem;
  --space-lg:            2.5rem;
  --space-xl:            4rem;

  /* -- LAYOUT ----------------------------------------------------------- */
  --measure:             68ch;      /* reading width; structural, unchanged */
  --container-max:       75rem;
  --radius:              0.5rem;    /* small, real, not 0 and not pill-shaped */
  --radius-sm:           0.25rem;
  --border-width:        1px;

  /* -- EFFECTS -----------------------------------------------------------
   * Named here, applied in site.css, so every dazzle effect on the
   * page shares one timing/easing vocabulary rather than each
   * component inventing its own duration.
   */
  --shadow-sm:           0 1px 2px rgba(28, 43, 58, 0.08);
  --shadow-md:           0 4px 12px rgba(28, 43, 58, 0.10);
  --shadow-lg:           0 12px 32px rgba(28, 43, 58, 0.16);
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
}