/* =====================================================================
   AUXILIARY 7 - DESIGN TOKENS
   Lifted verbatim from board-01's token block (PRD section 5.1: "the
   token block at the top of board-01-volunteer-home.html is the design
   system... lift it into the app verbatim as CSS custom properties").
   Self-hosted fonts below, per section 5.1's "must be self-hosted in the
   app container rather than loaded from fonts.googleapis.com."
   ===================================================================== */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Anton.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/Archivo.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/ArchivoNarrow.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/JetBrainsMono.woff2") format("woff2");
}

:root {
  color-scheme: light; /* section 5.1: no dark mode in v1, don't let browsers auto-invert */

  /* ---------- Iris - primary brand purple ---------- */
  --iris-50:  #f5eef9;
  --iris-100: #e6d5f0;
  --iris-200: #cba9e0;
  --iris-300: #ad7dcf;
  --iris-400: #8d54bd;
  --iris-500: #6a2c91;
  --iris-600: #5a2479;
  --iris-700: #481c61;
  --iris-800: #361449;
  --iris-900: #220c2e;
  --iris-950: #14071c;

  /* ---------- Ink - warm off-black neutral ---------- */
  --ink-50:   #f7f6f8;
  --ink-100:  #ecebf0;
  --ink-200:  #d8d6df;
  --ink-300:  #b8b4c2;
  --ink-400:  #8a8597;
  --ink-500:  #5e596c;
  --ink-600:  #423e4d;
  --ink-700:  #2e2b37;
  --ink-800:  #232026;
  --ink-900:  #1a171d;
  --ink-950:  #0e0c10;

  /* ---------- Paper ---------- */
  --paper:        #ffffff;
  --paper-tinted: #fbfaf7;
  --paper-cream:  #f4f1ea;

  /* ---------- Semantic accents ---------- */
  --success-50:  #e9f5ee;
  --success-500: #2f8a4e;
  --success-700: #1f5c34;

  /* section 5.5's contrast fix: warning-500 is 2.95:1 on white, under the
     3:1 floor for meaningful graphics - use warning-700 for pills/markers,
     keep warning-500 for fills only. */
  --warning-50:  #fbf2dd;
  --warning-500: #c98a14;
  --warning-700: #8a5e0d;

  --danger-50:   #fbe9e7;
  --danger-500:  #c0392b;
  --danger-700:  #7a241b;

  --info-50:     #e7eef9;
  --info-500:    #2f55a8;
  --info-700:    #1f3a73;

  /* ---------- Semantic roles ---------- */
  --bg:              var(--paper);
  --bg-subtle:       var(--paper-tinted);
  --bg-muted:        var(--ink-50);
  --bg-inverse:      var(--ink-900);
  --bg-brand:        var(--iris-500);
  --bg-brand-soft:   var(--iris-50);

  --fg:              var(--ink-900);
  --fg-muted:        var(--ink-600);
  --fg-subtle:       var(--ink-500);
  --fg-disabled:     var(--ink-300);
  --fg-on-brand:     #ffffff;
  --fg-on-inverse:   var(--ink-50);
  --fg-brand:        var(--iris-500);
  --fg-link:         var(--iris-600);
  --fg-link-hover:   var(--iris-700);

  --border:          var(--ink-200);
  --border-strong:   var(--ink-300);
  --border-subtle:   var(--ink-100);
  --border-brand:    var(--iris-500);

  /* section 5.1: a visible 2px focus ring at 2px offset on every
     interactive element, never suppressed. */
  --focus-ring:      var(--iris-400);

  /* ---------- Type families ---------- */
  --font-display: "Anton", "Archivo Narrow", "Impact", system-ui, sans-serif;
  --font-sans:    "Archivo", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-narrow:  "Archivo Narrow", "Archivo", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (~1.18 ratio) ---------- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;
  --text-7xl:  112px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.06em;
  --tracking-caps:   0.12em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ---------- Spacing, 4px base ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(26, 23, 29, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 23, 29, 0.06), 0 1px 2px rgba(26, 23, 29, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 23, 29, 0.06), 0 2px 4px rgba(26, 23, 29, 0.04);
  --shadow-lg: 0 12px 28px rgba(26, 23, 29, 0.08), 0 4px 10px rgba(26, 23, 29, 0.04);
  --shadow-xl: 0 24px 48px rgba(26, 23, 29, 0.10), 0 8px 16px rgba(26, 23, 29, 0.05);
  --shadow-brand: 0 12px 28px rgba(106, 44, 145, 0.18), 0 4px 10px rgba(106, 44, 145, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ---------- Motion ---------- */
  --duration-fast:    120ms;
  --duration-base:    180ms;
  --duration-slow:    280ms;
  --duration-slowest: 420ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg-subtle);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--fg-link); }
a:hover { color: var(--fg-link-hover); }

/* section 5.1: a visible 2px ring at 2px offset on every interactive
   element, never suppressed - this is the one rule every component below
   relies on rather than re-declaring its own focus style. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

button, input, textarea, select { font-family: inherit; }

/* section 5.1: 44x44 CSS px minimum touch target on every small button,
   pill or icon control. */
button, .btn, input[type="checkbox"], input[type="radio"] {
  min-height: 44px;
}
input[type="checkbox"], input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
}

@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;
  }
}