/* ═══════════════════════════════════════════════════════════════════════
   NCCR Evolving Language — shared theme for VoCallBase Citizen
   ───────────────────────────────────────────────────────────────────────
   Visual language modelled on https://evolvinglanguage.ch/ :
     • Ubuntu (light) / Roboto typography, white surfaces, cool-gray text
     • NCCR corporate palette (see --nccr-* below)
     • links in NCCR red, interactive controls in NCCR blue,
       header/footer chrome in NCCR gray (#44546a)

   HOW THE TOKENS WORK
   The templates use variables named after the ORIGINAL GitHub-dark hex
   values they replaced (e.g. var(--c-58a6ff) = "accent blue",
   var(--c-3fb950) = "success green"). Those names are structural — they
   say what ROLE a colour plays — so instead of touching ~1,400 call sites
   we remap every --c-* token onto a semantic --nccr-* alias here.
   Change a colour once in the alias block and it propagates everywhere.

   Light is the default (matches the NCCR site). Dark is an opt-in courtesy
   theme keyed off <html data-theme="dark"> (see partials/_theme_head.html).
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&family=Roboto:wght@300;400;500&display=swap');

/* ── 1. Corporate palette (never themed — these are the brand constants) ── */
:root {
    --nccr-red:       #941100;
    --nccr-orange:    #945200;
    --nccr-yellow:    #929000;
    --nccr-green-1:   #4e8f00;
    --nccr-green-2:   #008f00;
    --nccr-green-3:   #009051;
    --nccr-turquoise: #009193;
    --nccr-blue:      #005493;
    --nccr-gray:      #44546a;

    /* Typography (site: "ubuntu-light" body, Roboto/Arial fallback) */
    --nccr-font-sans: 'Ubuntu', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --nccr-font-mono: 'Ubuntu Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

    /* The multicoloured NCCR word-mark, as a stripe (used on the header) */
    --nccr-brand-stripe: linear-gradient(90deg,
        var(--nccr-red) 0 11.1%, var(--nccr-orange) 11.1% 22.2%, var(--nccr-yellow) 22.2% 33.3%,
        var(--nccr-green-1) 33.3% 44.4%, var(--nccr-green-2) 44.4% 55.5%, var(--nccr-green-3) 55.5% 66.6%,
        var(--nccr-turquoise) 66.6% 77.7%, var(--nccr-blue) 77.7% 88.8%, var(--nccr-gray) 88.8% 100%);
}

/* ── 2. Semantic aliases — LIGHT (default, mirrors evolvinglanguage.ch) ── */
:root {
    color-scheme: light;

    /* Neutrals: cool grays derived from NCCR gray #44546a */
    --nccr-bg:            #ffffff;   /* page canvas — full white like evolvinglanguage.ch (wishlist) */
    --nccr-surface:       #ffffff;   /* cards, header, sidebar     */
    --nccr-surface-2:     #f1f2f4;   /* nested / alt rows          */
    --nccr-surface-3:     #ebedef;   /* elevated / table header    */
    --nccr-inset:         #e6e8eb;   /* inputs, pill backgrounds   */
    --nccr-hover:         #dde0e4;   /* hover fill                 */
    --nccr-border:        #d2d5db;
    --nccr-border-muted:  #9aa2ae;   /* real borders/placeholders */
    --nccr-fg-disabled:   #6c7787;   /* disabled/hint TEXT (was border-muted) */   /* placeholders, disabled     */
    --nccr-fg-subtle:     #6c7787;   /* hints                      */
    --nccr-fg-muted:      #545d68;   /* secondary text, labels     */
    --nccr-fg:            #44546a;   /* body text = NCCR gray      */
    --nccr-fg-strong:     #384557;   /* site body/heading colour   */
    --nccr-heading:       #2e3b4c;

    /* Blue — primary interactive colour (buttons, active tabs, focus) */
    --nccr-primary:        var(--nccr-blue);
    --nccr-primary-hover:  #0069b8;
    --nccr-primary-soft:   #387baf;
    --nccr-primary-emph:   var(--nccr-blue);
    --nccr-primary-strong: #004070;
    --nccr-primary-tint:   #e8f1f7;

    /* Red — brand accent: hyperlinks (as on the NCCR site) and danger */
    --nccr-link:           var(--nccr-red);
    --nccr-link-hover:     #b81500;
    --nccr-danger:         var(--nccr-red);
    --nccr-danger-hover:   #b81500;
    --nccr-danger-emph:    var(--nccr-red);
    --nccr-danger-strong:  #700d00;
    --nccr-danger-tint:    #f7eae8;

    /* Greens — success / done */
    --nccr-success:        #007800;
    --nccr-success-alt:    #3f7300;
    --nccr-success-soft:   #00884c;
    --nccr-success-hover:  #0f890f;
    --nccr-success-emph:   #008a00;
    --nccr-success-strong: #007000;
    --nccr-success-tint:   #e8f7e8;

    /* Orange / yellow — warning, in-progress, severe */
    --nccr-warning:        var(--nccr-orange);
    --nccr-warning-alt:    #666500;
    --nccr-warning-strong: #706f00;
    --nccr-severe:         #7a4300;
    --nccr-severe-strong:  #5e3400;
    --nccr-warning-tint:   #f7f1e8;

    /* Turquoise — secondary accent (models / AI, "done" states, dev tools) */
    --nccr-accent2:        #007374;
    --nccr-accent2-hover:  #00a4a6;
    --nccr-accent2-soft:   #2c8182;
    --nccr-accent2-emph:   #008385;
    --nccr-accent2-strong: #006f70;
    --nccr-accent2-tint:   #e8f7f7;

    /* rgb triplets for rgba() glows / shadows / overlays */
    --nccr-primary-rgb:   0, 84, 147;
    --nccr-success-rgb:   0, 120, 0;
    --nccr-warning-rgb:   148, 82, 0;
    --nccr-severe-rgb:    122, 67, 0;
    --nccr-danger-rgb:    148, 17, 0;
    --nccr-accent2-rgb:   0, 115, 116;
    --nccr-fg-rgb:        68, 84, 106;
    --nccr-fg-muted-rgb:  84, 93, 104;
    --nccr-shadow-rgb:    68, 84, 106;   /* soft gray shadows on light UI */
    --nccr-overlay-rgb:   38, 47, 60;    /* modal backdrops                */
    --nccr-on-emph:       #ffffff;       /* text on solid coloured fills   */
    --nccr-on-emph-rgb:   255, 255, 255;
}

/* ── 3. Semantic aliases — DARK (opt-in) ── */
:root[data-theme="dark"] {
    color-scheme: dark;

    --nccr-bg:            #12171e;
    --nccr-surface:       #1a2029;
    --nccr-surface-2:     #1e2530;
    --nccr-surface-3:     #222a35;
    --nccr-inset:         #252d38;
    --nccr-hover:         #2e3742;
    --nccr-border:        #364150;
    --nccr-border-muted:  #5b6879;
    --nccr-fg-disabled:   #79899e;
    --nccr-fg-subtle:     #7b889a;
    --nccr-fg-muted:      #a2adbb;
    --nccr-fg:            #cbd3dd;
    --nccr-fg-strong:     #dfe5ec;
    --nccr-heading:       #eef2f6;

    --nccr-primary:        #5eade8;
    --nccr-primary-hover:  #82bfed;
    --nccr-primary-soft:   #a6d1f2;
    --nccr-primary-emph:   #4f9edb;
    --nccr-primary-strong: #3f8ecb;
    --nccr-primary-tint:   #16283a;

    --nccr-link:           #f2705f;
    --nccr-link-hover:     #f59184;
    --nccr-danger:         #f59184;
    --nccr-danger-hover:   #f59184;
    --nccr-danger-emph:    #ea7565;
    --nccr-danger-strong:  #dc6353;
    --nccr-danger-tint:    #3a1c18;

    --nccr-success:        #59c059;
    --nccr-success-alt:    #91c653;
    --nccr-success-soft:   #53c693;
    --nccr-success-hover:  #76cb76;
    --nccr-success-emph:   #4fb84f;
    --nccr-success-strong: #3fa93f;
    --nccr-success-tint:   #16301a;

    --nccr-warning:        #eca651;
    --nccr-warning-alt:    #cfcd59;
    --nccr-warning-strong: #aaa831;
    --nccr-severe:         #d88218;
    --nccr-severe-strong:  #cf8a2a;
    --nccr-warning-tint:   #332a18;

    --nccr-accent2:        #5ec8c9;
    --nccr-accent2-hover:  #7dd2d4;
    --nccr-accent2-soft:   #9cddde;
    --nccr-accent2-emph:   #4dbdbf;
    --nccr-accent2-strong: #3aadaf;
    --nccr-accent2-tint:   #143233;

    --nccr-primary-rgb:   94, 173, 232;
    --nccr-success-rgb:   89, 192, 89;
    --nccr-warning-rgb:   236, 166, 81;
    --nccr-severe-rgb:    216, 130, 24;
    --nccr-danger-rgb:    245, 145, 132;
    --nccr-accent2-rgb:   94, 200, 201;
    --nccr-fg-rgb:        203, 211, 221;
    --nccr-fg-muted-rgb:  162, 173, 187;
    --nccr-shadow-rgb:    0, 0, 0;
    --nccr-overlay-rgb:   0, 0, 0;
    --nccr-on-emph:       #101720;
    --nccr-on-emph-rgb:   16, 23, 32;
}

/* ── 4. Legacy --c-<hex> tokens → semantic aliases ──────────────────────
   Names are the ORIGINAL GitHub-dark hex values (structural roles), NOT the
   colours you will see. Both themes share this block; only the aliases
   above change. Keep this table in sync if a new --c-* token is added. */
:root {
    /* neutrals */
    --c-0d1117: var(--nccr-bg);
    --c-161b22: var(--nccr-surface);
    --c-1c2129: var(--nccr-surface-2);
    --c-1f2937: var(--nccr-surface-3);
    --c-21262d: var(--nccr-inset);
    --c-2d333b: var(--nccr-hover);
    --c-30363d: var(--nccr-border);
    --c-484f58: var(--nccr-fg-disabled);
    --c-6e7681: var(--nccr-fg-subtle);
    --c-8b949e: var(--nccr-fg-muted);
    --c-c9d1d9: var(--nccr-fg);
    --c-e6edf3: var(--nccr-fg-strong);
    --c-f0f6fc: var(--nccr-heading);
    --c-ffffff: var(--nccr-on-emph);
    --c-fff:    var(--nccr-on-emph);

    /* blue → NCCR blue (primary) */
    --c-58a6ff: var(--nccr-primary);
    --c-79c0ff: var(--nccr-primary-hover);
    --c-a5d6ff: var(--nccr-primary-soft);
    --c-388bfd: var(--nccr-primary-hover);
    --c-3b82f6: var(--nccr-primary-hover);
    --c-1f6feb: var(--nccr-primary-emph);
    --c-0d6efd: var(--nccr-primary-emph);
    --c-0a58ca: var(--nccr-primary-strong);

    /* green → NCCR greens */
    --c-3fb950: var(--nccr-success);
    --c-56d364: var(--nccr-success-alt);
    --c-7ee787: var(--nccr-success-soft);
    --c-238636: var(--nccr-success-emph);
    --c-198754: var(--nccr-success-emph);
    --c-2ea043: var(--nccr-success-hover);
    --c-146c43: var(--nccr-success-strong);
    --c-1c3a26: var(--nccr-success-tint);

    /* yellow / orange → NCCR orange & yellow */
    --c-d29922: var(--nccr-warning);
    --c-e3b341: var(--nccr-warning);      /* attention text: orange reads better than yellow on white */
    --c-ffc107: var(--nccr-warning-alt);
    --c-ffb300: var(--nccr-warning);
    --c-f0883e: var(--nccr-severe);
    --c-d68532: var(--nccr-severe);
    --c-bd6d28: var(--nccr-severe-strong);

    /* red → NCCR red */
    --c-f85149: var(--nccr-danger);
    --c-ff7b72: var(--nccr-danger-hover);
    --c-da3633: var(--nccr-danger-emph);
    --c-c93432: var(--nccr-danger-strong);
    --c-b12e2b: var(--nccr-danger-strong);

    /* purple → NCCR turquoise (secondary accent) */
    --c-a371f7: var(--nccr-accent2);
    --c-9b59d6: var(--nccr-accent2);
    --c-bc8cff: var(--nccr-accent2-hover);
    --c-d2a8ff: var(--nccr-accent2-soft);
    --c-6e40c9: var(--nccr-accent2-emph);
    --c-6f42c1: var(--nccr-accent2-emph);
    --c-5a32a3: var(--nccr-accent2-strong);
    --c-3b2a5c: var(--nccr-accent2-tint);
}

/* ── 5. Base ─────────────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--nccr-font-sans);
    font-weight: 400;
    line-height: 1.6;
    color: var(--nccr-fg);
    background: var(--nccr-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nccr-font-sans);
    font-weight: 300;                 /* the site's "ubuntu-light" headings */
    color: var(--nccr-fg-strong);
    letter-spacing: 0.01em;
}
h1 strong, h2 strong, h3 strong { font-weight: 500; }

/* Hyperlinks are NCCR red, exactly as on evolvinglanguage.ch */
a { color: var(--nccr-link); }
a:hover { color: var(--nccr-link-hover); }

code, pre, kbd, samp, .mono {
    font-family: var(--nccr-font-mono);
}

::selection {
    background: rgba(var(--nccr-primary-rgb), 0.22);
}

/* Focus ring — NCCR blue, visible in both themes */
:focus-visible {
    outline: 2px solid var(--nccr-primary);
    outline-offset: 2px;
}

/* Scrollbars follow the surface palette */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--nccr-border-muted) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--nccr-border-muted); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── 6. Brand devices ────────────────────────────────────────────────── */
/* Thin multicolour stripe = nod to the NCCR word-mark. Add .nccr-stripe
   to any container (the app header uses it). */
.nccr-stripe {
    position: relative;
}
.nccr-stripe::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--nccr-brand-stripe);
    pointer-events: none;
}

/* "Part of NCCR Evolving Language" attribution — used on the welcome page
   and as a page footer where there is one. */
.nccr-affiliation {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nccr-font-sans);
    font-weight: 300;
    font-size: 0.86em;
    color: var(--nccr-fg-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.nccr-affiliation .nccr-mark {
    display: inline-block;
    width: 34px;
    height: 6px;
    border-radius: 3px;
    background: var(--nccr-brand-stripe);
}
.nccr-affiliation strong {
    font-weight: 500;
    color: var(--nccr-fg-strong);
}
.nccr-affiliation:hover { color: var(--nccr-link); text-decoration: none; }
.nccr-affiliation:hover strong { color: var(--nccr-link); }

/* Form controls must carry our font in their own right. Bootstrap's Reboot sets
   `font-family: inherit` on these elements, which is the ONLY reason they show
   Ubuntu today — if the Bootstrap CDN is blocked or slow, every input, button and
   select silently reverts to the OS font. */
button, input, optgroup, select, textarea {
    font-family: var(--nccr-font-sans);
}

/* Native control accents (checkbox ticks, radios, range thumbs, progress) default
   to the OS accent — usually a non-brand blue. One rule keeps every present and
   future control on palette. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
    accent-color: var(--nccr-primary);
}

/* Bootstrap component nudges so its defaults don't leak GitHub/Bootstrap blue */
.btn-primary,
.btn-primary:focus {
    --bs-btn-bg: var(--nccr-primary-emph);
    --bs-btn-border-color: var(--nccr-primary-emph);
    --bs-btn-hover-bg: var(--nccr-primary-hover);
    --bs-btn-hover-border-color: var(--nccr-primary-hover);
    --bs-btn-active-bg: var(--nccr-primary-strong);
    --bs-btn-active-border-color: var(--nccr-primary-strong);
}
.btn-success {
    --bs-btn-bg: var(--nccr-success-emph);
    --bs-btn-border-color: var(--nccr-success-emph);
    --bs-btn-hover-bg: var(--nccr-success-hover);
    --bs-btn-hover-border-color: var(--nccr-success-hover);
}
.btn-danger {
    --bs-btn-bg: var(--nccr-danger-emph);
    --bs-btn-border-color: var(--nccr-danger-emph);
    --bs-btn-hover-bg: var(--nccr-danger-hover);
    --bs-btn-hover-border-color: var(--nccr-danger-hover);
}
/* A bare `class="btn"` inherits Bootstrap's --bs-btn-color (#212529), which is
   near-invisible on our dark surfaces; and .btn-secondary is unstyled by the app,
   so it paints Bootstrap gray #6c757d. Bind both to the palette. */
.btn {
    --bs-btn-color: var(--nccr-fg);
    --bs-btn-hover-color: var(--nccr-fg-strong);
}
.btn-secondary {
    --bs-btn-bg: var(--nccr-inset);
    --bs-btn-border-color: var(--nccr-border);
    --bs-btn-color: var(--nccr-fg);
    --bs-btn-hover-bg: var(--nccr-hover);
    --bs-btn-hover-border-color: var(--nccr-border-muted);
    --bs-btn-hover-color: var(--nccr-fg-strong);
}

.form-control:focus {
    border-color: var(--nccr-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--nccr-primary-rgb), 0.2);
}