/* Coon Lab data websites shared theme: design tokens
 * Theme version: 1.1.0  (raise on every change; see shared_theme/README.md)
 * 1.1.0 (2026-10-19, HD1): the top bar (.ct-topbar) and the "See our other projects" menu (.ct-projects,
 *       projects-menu.js); new tokens --ct-topbar-*. Nothing earlier was renamed or changed.
 *
 * Colours are taken from https://coonlabs.com/ (WordPress theme "kelladesign", Salient 14.0.3), read 2026-10-18.
 * Each source value names the stylesheet it came from; "derived" values were computed from a source value to pass
 * WCAG AA (see shared_theme/README.md and the TH1 report for every contrast ratio).
 *
 * Light values sit on :root and on any element with data-theme="light". Dark values apply under
 * prefers-color-scheme: dark (unless the page sets data-theme="light"), and on any element with data-theme="dark".
 * The data-theme attribute may be set on <html> (whole page) or on one section (as the demo does).
 */

/* ------------------------------------------------------------------------------------------------------------ */
/* Fonts: served from this folder, latin subset (Google Fonts files of 2026-10-18; licence texts in fonts/).     */
/* ------------------------------------------------------------------------------------------------------------ */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/open-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: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-latin-400-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: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-latin-400-italic.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;
}

:root,
[data-theme="light"] {
  color-scheme: light;

  /* --- Brand colours, exactly as coonlabs.com uses them ------------------------------------------------------ */
  --ct-brand-blue: #12aaeb;   /* Salient accent colour: dynamic-css (autoptimize_single_a5130d3b...css) "body a",
                                 h3 and page-title colour in the inline dynamic-css block; logo circle pixels      */
  --ct-brand-navy: #13334f;   /* home page hero row background (home.html, data-bg-color); off-canvas menu bg     */
  --ct-brand-slate: #597a96;  /* Salient extra-color-1/2; p, h4, footer text and links, copyright rule, more-link  */
  --ct-brand-steel: #375675;  /* page-loading screen background (dynamic-css #ajax-loading-screen)                  */
  --ct-brand-ink: #4a4a4a;    /* body and heading text colour (dynamic-css "body,body h1..h6{color}")               */
  --ct-brand-mist: #f1f5f8;   /* light panel behind bios (.coon gradient) and research sections                     */
  --ct-brand-logo-grey: #566978; /* the word "COON" in coon-logo.png (measured from the image pixels)              */

  /* --- Surfaces ----------------------------------------------------------------------------------------------- */
  --ct-bg: #ffffff;              /* page background (coonlabs.com: #fff body and footer)                          */
  --ct-surface: #ffffff;         /* cards, tables                                                                  */
  --ct-surface-alt: #f1f5f8;     /* = brand mist; panels, table headers, code                                      */
  --ct-surface-sunken: #f7f9fb;  /* derived: table stripes, between bg and mist                                    */

  /* --- Text --------------------------------------------------------------------------------------------------- */
  --ct-text: #4a4a4a;            /* = brand ink                                                                    */
  --ct-text-strong: #13334f;     /* = brand navy; headings                                                         */
  --ct-text-muted: #54738e;      /* derived from slate #597a96, darkened in HSL until >= 4.5:1 on mist #f1f5f8      */
  --ct-heading-accent: #0d78a6;  /* derived from blue #12aaeb, darkened until >= 4.5:1 on white and on mist        */
  --ct-link: #0d78a6;            /* derived, as above (#12aaeb itself is 2.63:1 on white)                          */
  --ct-link-hover: #13334f;
  --ct-selection-bg: #bfe6f9;    /* derived tint of brand blue                                                     */

  /* --- Accent and controls ------------------------------------------------------------------------------------ */
  --ct-accent: #12aaeb;          /* brand blue for fills, rules and marks that carry no text                       */
  --ct-accent-strong: #0d78a6;   /* brand blue where text or a control edge must reach contrast                    */
  --ct-on-accent-strong: #ffffff;
  --ct-border: #d3dde6;          /* derived from slate; decorative dividers only                                   */
  --ct-border-strong: #6c879d;   /* derived from slate; form control edges, >= 3:1 on white and on mist            */
  --ct-focus: #0d78a6;

  /* --- Buttons ------------------------------------------------------------------------------------------------ */
  --ct-btn-primary-bg: #0d78a6;
  --ct-btn-primary-text: #ffffff;
  --ct-btn-primary-bg-hover: #13334f;
  --ct-btn-secondary-bg: #597a96;   /* = brand slate, the colour of coonlabs.com's "Read more" pill              */
  --ct-btn-secondary-text: #ffffff;
  --ct-btn-secondary-bg-hover: #375675;

  /* --- Header (navy band, as coonlabs.com's page headers) and footer (white, slate text) ------------------------ */
  --ct-header-bg: #13334f;
  --ct-header-text: #ffffff;
  --ct-header-muted: #c4d1dc;    /* derived from slate, lightened                                                  */
  --ct-header-accent: #12aaeb;   /* coonlabs.com page titles: #12aaeb on the navy header                           */
  --ct-footer-bg: #ffffff;
  --ct-footer-text: #54738e;
  --ct-footer-rule: #597a96;     /* coonlabs.com: #copyright border-top 1px solid #597a96                           */

  /* --- Table, tooltip, code ----------------------------------------------------------------------------------- */
  --ct-table-head-bg: #f1f5f8;
  --ct-table-head-text: #13334f;
  --ct-table-stripe: #f7f9fb;
  --ct-table-hover: #f0f6fb;  
  --ct-tooltip-bg: #13334f;
  --ct-tooltip-text: #ffffff;
  --ct-code-bg: #f1f5f8;
  --ct-code-text: #13334f;

  /* --- Status (reserved: never used as chart series colours) -------------------------------------------------- */
  --ct-info-bg: #e9f5fb;     --ct-info-text: #0a6890;     --ct-info-border: #12aaeb;
  --ct-success-bg: #e6f4ec;  --ct-success-text: #1d6b3f;  --ct-success-border: #2f9a5c;
  --ct-warning-bg: #fdf3dc;  --ct-warning-text: #7a4f00;  --ct-warning-border: #d49a1a;
  --ct-danger-bg: #fde8e6;   --ct-danger-text: #b1251b;   --ct-danger-border: #d64b40;

  /* --- Shadows ------------------------------------------------------------------------------------------------ */
  --ct-shadow-1: 0 1px 2px rgba(19, 51, 79, 0.08), 0 1px 3px rgba(19, 51, 79, 0.10);
  --ct-shadow-2: 0 2px 6px rgba(19, 51, 79, 0.10), 0 8px 24px rgba(19, 51, 79, 0.10);
  --ct-shadow-inset-btn: inset 0 -2px rgba(0, 0, 0, 0.1); /* coonlabs.com .nectar-button.medium                  */

  /* --- Chart colours (validated; see chart-colors.json for plotly.js and d3) ---------------------------------- */
  --ct-chart-surface: #ffffff;
  --ct-chart-grid: #e3e9ee;
  --ct-chart-axis: #6c879d;
  --ct-chart-1: #0d78a6;  /* blue (brand)  */
  --ct-chart-2: #d55e00;  /* vermilion     */
  --ct-chart-3: #009e73;  /* bluish green  */
  --ct-chart-4: #6a51a3;  /* violet        */
  --ct-chart-5: #c27400;  /* orange        */
  --ct-chart-6: #c46a9b;  /* pink          */
  --ct-chart-7: #867600;  /* olive         */
  --ct-chart-8: #1393cf;  /* sky (brand)   */
  --ct-seq-1: #5cbaee; --ct-seq-2: #45a3d6; --ct-seq-3: #2d8dbe; --ct-seq-4: #0d78a6; --ct-seq-5: #146088;
  --ct-seq-6: #15496b; --ct-seq-7: #13334f;
  --ct-div-neg-4: #13334f; --ct-div-neg-3: #146088; --ct-div-neg-2: #4088b0; --ct-div-neg-1: #7fa9c4;
  --ct-div-mid: #e4e7ea;
  --ct-div-pos-1: #e08a5c; --ct-div-pos-2: #ce652c; --ct-div-pos-3: #a54400; --ct-div-pos-4: #6b2a00;
}

/* ---------------------------------------------------------------------------------------------------------------- */
/* Typography, spacing, shape: the same in both modes.                                                             */
/* coonlabs.com (dynamic-css): body Open Sans 16px/28px 400; h1 50/60 600; h2 42/48 300; h3 42/48 600 (custom CSS   */
/* sets 30/36 blue); h4 Lora 22/30 400; h5 26/32 600; h6 12/20 600 uppercase 1px; nav 14/18 700 uppercase .5px;     */
/* buttons 14px 700 uppercase 1px; em Lora 15/24. The scale below keeps those ratios but caps the largest sizes so   */
/* data pages are not dominated by their headings.                                                                 */
/* ---------------------------------------------------------------------------------------------------------------- */
:root {
  --ct-font-sans: "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ct-font-serif: "Lora", Georgia, "Times New Roman", serif;
  --ct-font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --ct-fs-xs: 0.75rem;      /* 12px: h6, captions, copyright (coonlabs.com copyright 12px)                       */
  --ct-fs-sm: 0.875rem;     /* 14px: nav, buttons, table text                                                    */
  --ct-fs-base: 1rem;       /* 16px body                                                                         */
  --ct-fs-lead: 1.125rem;   /* 18px                                                                              */
  --ct-fs-h6: 0.75rem;
  --ct-fs-h5: 1.25rem;
  --ct-fs-h4: 1.375rem;     /* 22px Lora, as coonlabs.com h4                                                     */
  --ct-fs-h3: 1.625rem;
  --ct-fs-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --ct-fs-h1: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  --ct-lh-body: 1.75;       /* 28/16 as coonlabs.com                                                             */
  --ct-lh-tight: 1.2;
  --ct-lh-snug: 1.4;
  --ct-fw-light: 300;
  --ct-fw-regular: 400;
  --ct-fw-semibold: 600;
  --ct-fw-bold: 700;
  --ct-tracking-caps: 0.06em; /* ~1px at 14px, as coonlabs.com uppercase labels                                  */

  --ct-space-1: 0.25rem;
  --ct-space-2: 0.5rem;
  --ct-space-3: 0.75rem;
  --ct-space-4: 1rem;
  --ct-space-5: 1.5rem;
  --ct-space-6: 2rem;
  --ct-space-7: 3rem;
  --ct-space-8: 4rem;

  --ct-radius-sm: 3px;      /* coonlabs.com .nectar-button.medium                                               */
  --ct-radius-md: 6px;
  --ct-radius-lg: 10px;
  --ct-radius-pill: 999px;  /* coonlabs.com "Read more" link: border-radius 200px                               */

  --ct-container: 75rem;    /* 1200px                                                                            */
  --ct-container-narrow: 48rem;
  --ct-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --ct-header-height: 4rem;
  --ct-transition: 0.2s ease;

  /* Top bar (1.1.0): white in both modes, because the sites' and collaborators' colour logos are drawn for white.  */
  /* Text on it is brand navy (13.0:1 on white, 11.9:1 on mist); the menu's hover fill is brand mist.              */
  --ct-topbar-bg: #ffffff;
  --ct-topbar-text: #13334f;
  --ct-topbar-muted: #54738e;     /* 5.0:1 on white */
  --ct-topbar-rule: #d3dde6;      /* = --ct-border, decorative */
  --ct-topbar-hover: #f1f5f8;     /* = brand mist */
  --ct-topbar-edge: #6c879d;      /* the menu button's edge, 3.8:1 on white (controls need 3:1) */
  --ct-topbar-focus: #0d78a6;     /* focus ring, 4.9:1 on white, 4.5:1 on mist */
  --ct-topbar-height: 4.5rem;
  --ct-topbar-logo: 2.5rem;       /* height of the site's logo and the Coon logo */
  --ct-topbar-partner: 2.25rem;   /* height of a collaborator's logo */
}

/* ---------------------------------------------------------------------------------------------------------------- */
/* Dark mode. Derived from the same brand colours: the page sits on a darker navy of the hero colour, cards on the  */
/* hero navy itself, and the brand blue becomes the text accent (it reaches 4.5:1 on these surfaces).               */
/* The block is written twice: once for the OS setting, once for an explicit data-theme="dark".                     */
/* ---------------------------------------------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ct-bg: #0e2233; --ct-surface: #13334f; --ct-surface-alt: #1a3f5f; --ct-surface-sunken: #163a58;
    --ct-text: #e6edf2; --ct-text-strong: #ffffff; --ct-text-muted: #a7bccd; --ct-heading-accent: #4dbdf0;
    --ct-link: #4dbdf0; --ct-link-hover: #92d9f7; --ct-selection-bg: #1f6a9a;
    --ct-accent: #12aaeb; --ct-accent-strong: #4dbdf0; --ct-on-accent-strong: #0e2233;
    --ct-border: #2c5072; --ct-border-strong: #7d9bb5; --ct-focus: #4dbdf0;
    --ct-btn-primary-bg: #12aaeb; --ct-btn-primary-text: #0e2233; --ct-btn-primary-bg-hover: #4dbdf0;
    --ct-btn-secondary-bg: #597a96; --ct-btn-secondary-text: #ffffff; --ct-btn-secondary-bg-hover: #375675;
    --ct-header-bg: #0a1a29; --ct-header-text: #ffffff; --ct-header-muted: #c4d1dc; --ct-header-accent: #12aaeb;
    --ct-footer-bg: #0e2233; --ct-footer-text: #a7bccd; --ct-footer-rule: #597a96;
    --ct-table-head-bg: #1a3f5f; --ct-table-head-text: #ffffff; --ct-table-stripe: #163a58; --ct-table-hover: #1d4568;
    --ct-tooltip-bg: #e6edf2; --ct-tooltip-text: #13334f;
    --ct-code-bg: #1a3f5f; --ct-code-text: #e6edf2;
    --ct-info-bg: #0f3a55; --ct-info-text: #92d9f7; --ct-info-border: #12aaeb;
    --ct-success-bg: #123d2c; --ct-success-text: #7fdcaa; --ct-success-border: #3fae72;
    --ct-warning-bg: #3d3214; --ct-warning-text: #f2c14e; --ct-warning-border: #c9971c;
    --ct-danger-bg: #45201d; --ct-danger-text: #ff9a90; --ct-danger-border: #e0645a;
    --ct-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
    --ct-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --ct-chart-surface: #0e2233; --ct-chart-grid: #234664; --ct-chart-axis: #7d9bb5;
    --ct-chart-1: #3f8fd6; --ct-chart-2: #e0662a; --ct-chart-3: #14a37a; --ct-chart-4: #9583d8;
    --ct-chart-5: #c2850f; --ct-chart-6: #d4639c; --ct-chart-7: #9b8f1e; --ct-chart-8: #1c9fc0;
    --ct-seq-1: #1f6a9a; --ct-seq-2: #1e7fb4; --ct-seq-3: #1a94cf; --ct-seq-4: #12aaeb; --ct-seq-5: #6cc2f1;
    --ct-seq-6: #a3d9f7; --ct-seq-7: #d6f0fb;
    --ct-div-neg-4: #9ad9f7; --ct-div-neg-3: #54a8dd; --ct-div-neg-2: #2c81ba; --ct-div-neg-1: #2d6690;
    --ct-div-mid: #34495b;
    --ct-div-pos-1: #8a4a2a; --ct-div-pos-2: #bb5e2b; --ct-div-pos-3: #e1844f; --ct-div-pos-4: #f6b98f;
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --ct-bg: #0e2233; --ct-surface: #13334f; --ct-surface-alt: #1a3f5f; --ct-surface-sunken: #163a58;
  --ct-text: #e6edf2; --ct-text-strong: #ffffff; --ct-text-muted: #a7bccd; --ct-heading-accent: #4dbdf0;
  --ct-link: #4dbdf0; --ct-link-hover: #92d9f7; --ct-selection-bg: #1f6a9a;
  --ct-accent: #12aaeb; --ct-accent-strong: #4dbdf0; --ct-on-accent-strong: #0e2233;
  --ct-border: #2c5072; --ct-border-strong: #7d9bb5; --ct-focus: #4dbdf0;
  --ct-btn-primary-bg: #12aaeb; --ct-btn-primary-text: #0e2233; --ct-btn-primary-bg-hover: #4dbdf0;
  --ct-btn-secondary-bg: #597a96; --ct-btn-secondary-text: #ffffff; --ct-btn-secondary-bg-hover: #375675;
  --ct-header-bg: #0a1a29; --ct-header-text: #ffffff; --ct-header-muted: #c4d1dc; --ct-header-accent: #12aaeb;
  --ct-footer-bg: #0e2233; --ct-footer-text: #a7bccd; --ct-footer-rule: #597a96;
  --ct-table-head-bg: #1a3f5f; --ct-table-head-text: #ffffff; --ct-table-stripe: #163a58; --ct-table-hover: #1d4568;
  --ct-tooltip-bg: #e6edf2; --ct-tooltip-text: #13334f;
  --ct-code-bg: #1a3f5f; --ct-code-text: #e6edf2;
  --ct-info-bg: #0f3a55; --ct-info-text: #92d9f7; --ct-info-border: #12aaeb;
  --ct-success-bg: #123d2c; --ct-success-text: #7fdcaa; --ct-success-border: #3fae72;
  --ct-warning-bg: #3d3214; --ct-warning-text: #f2c14e; --ct-warning-border: #c9971c;
  --ct-danger-bg: #45201d; --ct-danger-text: #ff9a90; --ct-danger-border: #e0645a;
  --ct-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
  --ct-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  --ct-chart-surface: #0e2233; --ct-chart-grid: #234664; --ct-chart-axis: #7d9bb5;
  --ct-chart-1: #3f8fd6; --ct-chart-2: #e0662a; --ct-chart-3: #14a37a; --ct-chart-4: #9583d8;
  --ct-chart-5: #c2850f; --ct-chart-6: #d4639c; --ct-chart-7: #9b8f1e; --ct-chart-8: #1c9fc0;
  --ct-seq-1: #1f6a9a; --ct-seq-2: #1e7fb4; --ct-seq-3: #1a94cf; --ct-seq-4: #12aaeb; --ct-seq-5: #6cc2f1;
  --ct-seq-6: #a3d9f7; --ct-seq-7: #d6f0fb;
  --ct-div-neg-4: #9ad9f7; --ct-div-neg-3: #54a8dd; --ct-div-neg-2: #2c81ba; --ct-div-neg-1: #2d6690;
  --ct-div-mid: #34495b;
  --ct-div-pos-1: #8a4a2a; --ct-div-pos-2: #bb5e2b; --ct-div-pos-3: #e1844f; --ct-div-pos-4: #f6b98f;
}