/**
 * 27 APPAREL — DESIGN TOKENS
 *
 * Every colour, family and radius in the app resolves here. Before this file
 * the palette was 148 hex literals spread across six pages, so any change
 * meant a find-and-replace and the next one meant doing it again.
 *
 * The look is charcoal and slate: neutral ground, one restrained accent, and
 * colour reserved for status. The scarlet and navy it replaced came from
 * 27 Baseball and read sporty, which is not what a corporate quoting tool
 * should sound like.
 *
 * Rule of thumb: if you are about to type a hex value into a page, add a token
 * here instead.
 */

:root {
  /* Text, darkest to lightest. */
  --ink:        #17191C;
  --ink-2:      #3A4048;
  --muted:      #6B7280;
  --faint:      #9BA3AE;

  /* Surfaces. --paper is the page, --surface is anything raised off it. */
  --paper:      #F7F8FA;
  --surface:    #FFFFFF;
  --panel:      #F1F3F6;
  --line:       #E4E7EB;
  --line-2:     #EFF1F4;

  /* One accent: deep teal. On the storefront it appears on the quote buttons
     and on active filter checkboxes, and nowhere else -- everything else that
     used to be accent-coloured is now neutral. Contrast against white is
     7.6:1, so white text on it and it as text on white both clear AAA. */
  --accent:     #115E59;
  --accent-hi:  #0E4D49;
  --accent-ink: #FFFFFF;
  --accent-soft:#EDF4F3;

  /* Status. Desaturated on purpose — these report, they do not decorate. */
  --ok:         #1F7A5C;
  --ok-soft:    #EEF6F2;
  --warn:       #B45309;
  --warn-soft:  #FBF3E8;
  --bad:        #B3261E;
  --bad-soft:   #FDF1F0;

  /* Type. Two families: one for words, one for figures. Figures should look
     like figures — prices, style numbers and counts all use the mono. */
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shape and depth. Shadows are almost invisible by design; the crispness
     comes from a light border, not from a drop shadow. The focus ring is
     deliberately neutral rather than accent-tinted. */
  --r:          6px;
  --r-sm:       4px;
  --shadow:     0 1px 2px rgba(23, 25, 28, .04);
  --shadow-up:  0 2px 12px rgba(23, 25, 28, .07);
  --ring:       0 0 0 3px rgba(23, 25, 28, .13);

  /* An 8px rhythm, so spacing is chosen rather than guessed. */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 44px; --s8: 64px;
}

/* Shared base. Pages may override, and the admin ones do. */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }