/* ============================================================================
 * pfas-tokens.css — the ONE definition of the PFAS design tokens.
 * ----------------------------------------------------------------------------
 * Loaded by BOTH page types so they share one source:
 *   - PFAS workspace pages: <link> in pfas_macros.pt's page macro;
 *   - core SENAITE pages:   the senaite.pfas.core-overlay-css viewlet, ahead of
 *                           pfas-core-overlay.css.
 * Before this file the palette was typed out twice ("keep in sync"), and pages
 * used four tokens nobody defined. Change a value here and it changes on every
 * page; add a token here, never in a page.
 * ========================================================================== */

/* ── Typefaces: one family, three matched roles (decided 2026-10-01; lab
   asked for header / body / subtitle styles that match):
     headers    Nunito          (rounded)              --font-heading
     body       Nunito Sans     (its cleaner sibling)  --font-sans
     subtitles  Nunito Sans SemiBold, letter-spaced    --font-subtitle
   Served from the add-on, not a font CDN: pages keep working offline and no
   lab page calls a third party. Variable weight 200-1000. Licences: SIL OFL
   1.1, static/fonts/OFL.txt and OFL-NunitoSans.txt (bundling with GPL
   software is permitted). */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/nunito-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("fonts/nunito-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Palette: MINT with warm flags ───
     Colour carries MEANING and only through these tokens:
       brand / navigation / links  mint  (--s-primary*), deep teal bar (--s-dark)
       OK, passed, in date          mint  (--s-success*)
       information, in progress     teal  (--s-info*)
       warning, due soon, opened    amber (--s-warn*, --s-warning)
       failed, expired, overdue     coral (--s-danger*)
       neutral, archived, not set   grey  (--s-secondary, --s-border, --s-light)
     A page never types a hex value; tests/test_ui_ratchet.py counts them. */
  --s-primary:      #2fa88a;   /* brand fills and accents, never text (2.96:1) */
  --s-primary-dk:   #1e7a64;   /* text, and fills under white text (5.2:1, AA) */
  --s-primary-xdk:  #185f4e;   /* its hover */
  --s-primary-lt:   #e3f5ef;
  --s-dark:         #1f4e47;
  --s-body:         #263532;
  --s-secondary:    #66756f;
  --s-light:        #f5f9f7;
  --s-bg:           #ffffff;
  --s-border:       #d9e4df;
  --s-input-border: #c4d3cc;
  --s-input-text:   #3f4d48;
  --s-focus-ring:   rgba(47,168,138,.28);
  /* OK */
  --s-success:      #3dbb8f;
  --s-success-lt:   #ddf3ea;
  --s-success-bd:   #a9dec7;
  --s-success-text: #1d6b52;
  --on-success:     #0f1a18;   /* text on a --s-success fill, both themes */
  /* information */
  --s-info:         #2c7a72;
  --s-info-lt:      #e6f2f1;
  --s-info-bd:      #b5d8d3;
  --s-info-text:    #22605a;
  /* warning (warm) */
  --s-warning:      #e8a33d;
  --s-warn-lt:      #fdf1dd;
  --s-warn-bd:      #f3cf8f;
  --s-warn-text:    #8a5a12;
  /* failure (warm) */
  --s-danger:       #e06a4e;
  --s-danger-lt:    #fce8e3;
  --s-danger-bd:    #f2b8a9;
  --s-danger-dk:    #a8412a;
  /* recovery-tier colour key (categories, not flags): a grid cell and its
     tier row share one */
  --tier-c0: #2fa88a;
  --tier-c1: #3e7cb1;
  --tier-c2: #8a5cc7;
  --tier-c3: #1f4e47;
  --tier-c4: #b7791f;
  --tier-c5: #6c7a89;
  /* chart series (several analytes on one chart): categories, never a
     flag -- no amber or coral among them */
  --series-1: #2fa88a;
  --series-2: #3e7cb1;
  --series-3: #8a5cc7;
  --series-4: #1f4e47;
  --series-5: #5aa9d6;
  --series-6: #6c7a89;

  /* Aliases for names pages already used without a definition. */
  --s-text:         var(--s-body);
  --s-bg-alt:       var(--s-light);
  --s-bg-light:     var(--s-light);
  --pfas-rail-border: rgba(255,255,255,.12);

  /* ── Spacing scale ────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ── Type ─────────────────────────────────────────────────
     Matched to core SENAITE, whose listings set body/table text at 14px:
     PFAS pages had drifted to 12-13px with much at 9-11px, so text changed
     size between pages. Every screen template now uses only these sizes. */
  --font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Nunito", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-subtitle: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fw-heading: 700;
  --fw-subtitle: 600;
  --ls-subtitle: .04em;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs:   11px;   /* table headers, badges, captions  */
  --fs-sm:   13px;   /* secondary text                   */
  --fs-base: 14px;   /* body text, table cells (= core)  */
  --fs-md:   15px;   /* emphasised body                  */
  --fs-lg:   16px;   /* section headings                 */
  --fs-xl:   20px;   /* page-level headings              */
  --fs-2xl:  28px;   /* stat figures                     */

  /* ── Controls: one height for buttons and inputs in a toolbar ─────────── */
  --ctl-h:    36px;    /* 32 read as too small; core .btn is 38 */
  --ctl-h-sm: 28px;    /* dense row actions; 24 read as too small; core .btn-sm is 31 */
  --ctl-h-lg: 44px;    /* wizard steps at the bench: gloved-hand touch target */

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --radius:    4px;
  --radius-lg: 6px;

  /* ── Frame: identical on every page ───────────────────── */
  --pfas-header-h:    52px;
  --pfas-panel-width: 220px;
  --pfas-rail-width:  48px;
  --frame-gutter-x:   30px;    /* sidebar edge → content: x = 220 + 30 = 250, as core */
  --frame-gutter-y:   16px;
  --form-width:       960px;   /* the one narrow width for reading/form pages */
}

/* ── Form controls take the type scale (core and PFAS pages) ─────────────
   Browsers draw a control with no size of its own at 13.33px, so unsized
   buttons and inputs sat between the scale's steps. :where() keeps this at
   zero specificity: any class that sizes a control still wins. */
:where(button, input, select, textarea) { font-size: var(--fs-base); }
:where(code, pre, kbd, samp) { font-family: var(--font-mono); }

/* ── Semantic layer (decided 2026-10-11): what components and pages use from now
   on. The palette above stays underneath; these names are the ones a page may
   write, and the dark set below redefines ONLY these, so no page changes to be
   themed. Light is the default; dark is a per-user switch in the top bar
   (html[data-theme="dark"]), never the lab's default. */
:root {
  --surface:        var(--s-bg);          /* page, card and table ground */
  --surface-2:      var(--s-light);       /* strips, hover, insets, the segmented track */
  --surface-raised: #ffffff;              /* a card or menu above surface (with --shadow-card) */
  --text:           var(--s-body);
  --text-muted:     var(--s-secondary);
  --line:           var(--s-border);
  --line-strong:    var(--s-input-border);
  --accent:         var(--s-primary);     /* fills only: pill, underline, selected edge, switch track */
  --accent-text:    var(--s-primary-dk);  /* brand as text; fill under --on-accent */
  --accent-soft:    var(--s-primary-lt);
  --on-accent:      #ffffff;
  --frame:          var(--s-dark);
  --on-frame:       #ffffff;
  --on-frame-muted: rgba(255,255,255,.72);
  --focus:          var(--s-focus-ring);
  /* weights: a literal font-weight in a template is drift (373 found 2026-10-11) */
  --fw-body:   400;
  --fw-strong: 600;
  /* shape additions */
  --radius-card: 8px;
  --radius-pill: 999px;
  --fab-size:    56px;
  /* elevation */
  --shadow-card:       0 1px 3px rgba(0,0,0,.06);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.12);
  --shadow-pill:       0 1px 2px rgba(0,0,0,.12);
  /* motion: calm and short; reduced-motion switches it off */
  --t-fast: 160ms; --t-pill: 180ms; --t-reveal: 220ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-pill: 0ms; --t-reveal: 0ms; }
}
/* The dark set: the same meanings, values chosen for 4.5:1 text on each ground.
   Screen only: paper is always the light set, so a person reading in the dark
   theme still prints dark text on white. */
@media screen {
html[data-theme="dark"] {
  --s-primary: #3dbb8f; --s-primary-dk: #6fd3b4; --s-primary-xdk: #8fe0c6; --s-primary-lt: #1b3a32;
  --s-dark: #0f1a18; --s-body: #e6efec; --s-secondary: #9db0aa; --s-light: #1f2d2a; --s-bg: #16211f;
  --s-border: #2f403c; --s-input-border: #3a4d48; --s-input-text: #d7e3df; --s-focus-ring: rgba(61,187,143,.4);
  --s-success-lt: #1b3a30; --s-success-bd: #2f5e4c; --s-success-text: #86dcbc;
  --s-info: #4fa39a; --s-info-lt: #17332f; --s-info-bd: #2c5a55; --s-info-text: #8fd0c8;
  --s-warn-lt: #3d2d12; --s-warn-bd: #6a4a1a; --s-warn-text: #f2c77a;
  --s-danger-lt: #3f1f18; --s-danger-bd: #6e3328; --s-danger-dk: #f4a08c;
  --tier-c1: #5f9bd0; --tier-c2: #a583d8; --tier-c3: #5f9a90; --tier-c4: #d59a3f; --tier-c5: #94a3b3;
  --series-1: #3dbb8f; --series-2: #5f9bd0; --series-3: #a583d8; --series-4: #5f9a90; --series-5: #7fc0e3; --series-6: #94a3b3;
  --surface-raised: #1c2825; --on-accent: #0f1a18; --on-frame: #e6efec; --on-frame-muted: rgba(230,239,236,.70);
  --shadow-card: 0 1px 3px rgba(0,0,0,.5); --shadow-card-hover: 0 4px 12px rgba(0,0,0,.6); --shadow-pill: 0 1px 2px rgba(0,0,0,.6);
  color-scheme: dark;
}
}