/* =========================================================================
   THE BRAND. One file, one copy, both customer-facing surfaces.

   These values were measured off societalsocks.com on 10 Sep 2026 for task
   P155-#25 and lived in work-in-progress-site/site.css. Task P155-#31 gave the
   customer's reorder page (reorder.html) the same design language, and the
   moment two files need the same black, the same periwinkle and the same three
   faces, keeping two copies of them is a promise to let them drift. So they
   were lifted out of site.css into here, unchanged, and both consumers link
   this file FIRST:

       work-in-progress-site/index.html   ->  ../brand.css, then site.css
       work-in-progress-site/shop.html    ->  ../brand.css, then site.css, shop.css
       reorder.html                       ->  brand.css,    then reorder.css

   It sits at the repository root rather than inside work-in-progress-site/
   because it is the brand, not the staging site: when the site is promoted out
   of that folder this file does not move.

   WHAT IS NOT IN HERE. No component. No button, no card, no layout. The site
   is a shop window and the reorder page is a form a customer fills in; they
   share the vocabulary and nothing else. Adding a `.btn` here would make every
   change to the website's buttons a change to a customer's reorder page.

   THE CRM DOES NOT USE THIS FILE. app.css is a dense admin design system with
   its own palette and its own Inter/Outfit type, and it stays that way.
   ========================================================================= */

:root {
    /* ---- colour ---------------------------------------------------------
       Contrast is stated against the ground each value is used on; every
       text pairing below clears WCAG AA for its size. */
    --ink:          #000000;   /* the brand colour. 21:1 on white */
    --ink-soft:     #2e2e2e;   /* 13.6:1 on white — long-form body */
    --ink-mute:     #5c5c5c;   /*  6.7:1 on white — captions, small print */

    --paper:        #ffffff;
    --paper-alt:    #f2f2f2;   /* a flat grey band. No warmth, no gradient */
    --line:         #d6d6d6;   /* hairlines only, never carries meaning */
    --white:        #ffffff;

    --on-dark:      #ffffff;   /*     21:1 on black */
    --on-dark-mute: #b3b3b3;   /*   10.0:1 on black — body inside black bands */
    --dark-line:    #333333;

    --accent:       #ab96ff;   /* BACKGROUND ONLY. black on it = 8.5:1 */

    /* ---- type ----------------------------------------------------------- */
    --display: 'Sora', 'Montserrat', system-ui, sans-serif;
    --body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --alt:     'Space Grotesk', 'Montserrat', system-ui, sans-serif;

    --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }