/* ============================================================
   tokens.css — the single token file shared by BOTH properties.
   Identical property names on upfeurope.org and minuteofpeace.org.
   The parent leans violet (drawn from the logo), the child keeps
   leaning teal. Neither site adds a token the other lacks.

   Brand colour sampled from the association's own logo:
   #29176F (the triangle, the pupil and the wordmark).

   Rule: no colour is declared only inside a theme block. The
   complete light palette lives on bare :root; theme blocks
   redefine, never introduce.
   ============================================================ */

/* ---- Self-hosted faces. No Google Fonts, no CDN, ever. ---- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  font-variation-settings: "opsz" 48, "wdth" 100;
}
@font-face {
  font-family: "Spectral";
  src: url("/assets/fonts/Spectral-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/assets/fonts/Spectral-Medium.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* --- surface and ink: warm neutral ground, violet-black ink --- */
  --paper:      #FFFFFF;
  --ground:     #F4F2EE;
  --ink:        #14102B;
  --ink-soft:   #565073;
  --ink-faint:  #6F6987;   /* darkened: 5.19:1 on --paper, 4.64:1 on --ground (AA) */
  --rule:       #DCD7CF;
  --rule-strong: #29176F;

  /* --- brand --- */
  --violet:      #29176F;   /* the logo colour: primary */
  --violet-soft: #55409F;   /* links, active states, the practice thread */
  --violet-wash: #F1EEF9;
  --violet-ink:  #FFFFFF;   /* text on violet */
  --violet-hover: #1B0F4C;
  --violet-soft-hover: #3E2C80;

  /* --- names the child property leans on (kept in the shared set) --- */
  --indigo:      #29176F;
  --indigo-ink:  #FFFFFF;
  --indigo-hover: #1B0F4C;
  --indigo-wash: #F1EEF9;
  --teal:        #1F6F6B;
  --teal-ink:    #FFFFFF;
  --teal-hover:  #17544F;
  --teal-wash:   #EDF4F3;
  --overlay:     rgba(20, 16, 43, 0.55);

  /* --- semantic, kept apart from the brand: form + status only --- */
  --success:  #2E6B54;
  --warning:  #8A6212;
  --critical: #8E2A20;
  --success-wash:  #EAF2EE;
  --warning-wash:  #F7F1E3;
  --critical-wash: #F8ECEA;

  /* --- type: sans display, serif text, mono for data --- */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-body: "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  1.4375rem;
  --step-3:  1.75rem;
  --step-4:  clamp(1.875rem, 1.4rem + 1.7vw, 2.5rem);
  --step-5:  clamp(2.125rem, 1.4rem + 2.9vw, 3.25rem);
  --step-6:  clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem);

  --lh-tight: 1.02;
  --lh-head:  1.1;
  --lh-body:  1.68;
  --ls-display: -0.03em;
  --ls-label: 0.14em;
  --measure: 65ch;

  /* --- space --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;
  --s-10: 112px;
  --section-y: clamp(64px, 4vw + 40px, 112px);
  --container: 1140px;
  --gutter: clamp(20px, 4vw, 40px);
  --ribbon-h: 32px;
  --rail: 200px;

  /* --- form --- */
  --radius: 0px;
  --radius-round: 999px;
  --border: 1px solid var(--rule);
  --focus: 2px solid var(--violet-soft);
  --focus-offset: 3px;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Dark palette applies only when explicitly chosen via data-theme="dark".
   The site never follows the device's prefers-color-scheme setting. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #0B0917;
  --ground:     #151228;
  --ink:        #EDEAF6;
  --ink-soft:   #ACA6C4;
  --ink-faint:  #8E88A6;
  --rule:       #2A2545;
  --rule-strong: #B9A8F0;
  --violet:      #B9A8F0;
  --violet-soft: #C6B8F5;
  --violet-wash: #171233;
  --violet-ink:  #0B0917;
  --violet-hover: #D6CCFA;
  --violet-soft-hover: #DCD4FB;
  --indigo:      #B9A8F0;
  --indigo-ink:  #0B0917;
  --indigo-hover: #D6CCFA;
  --indigo-wash: #171233;
  --teal:        #6FC5BE;
  --teal-ink:    #08120F;
  --teal-hover:  #96D8D2;
  --teal-wash:   #10221F;
  --overlay:     rgba(4, 4, 12, 0.62);
  --success:  #6FC79E;
  --warning:  #E0B95C;
  --critical: #E58C80;
  --success-wash:  #11241C;
  --warning-wash:  #241E10;
  --critical-wash: #24140F;
}