/**
 * Design tokens. Brand values are defined once in :root (--at-*) and mapped
 * onto Bootstrap's own variables: light for the page, dark for navy bands
 * (<section data-bs-theme="dark">). Plain Bootstrap markup reads these, so it
 * is on-brand without custom classes. docs/design-system.md has the roles.
 *
 * The exam app is a theme boundary (body.exam-theme). It restores the values it
 * was built with at the end of this file, so its screens keep their pixels.
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("lib/plus-jakarta-sans-2.071.woff2") format("woff2-variations"), url("lib/plus-jakarta-sans-2.071.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --at-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --at-page: #fbfaf7;
    --at-white: #fff;
    --at-tint: #eef4ff;
    --at-ink: #0b1324;
    --at-muted: #59637a;
    --at-line: #dbe3f0;
    --at-blue: #0952e0;
    --at-blue-hover: #073fb8;
    --at-blue-ink: #0a3a9e;
    --at-blue-line: #c7d8fb;
    --at-navy: #091124;
    --at-navy-raised: #131c33;
    --at-navy-deep: #060b16;
    --at-navy-line: #26324d;
    --at-navy-text: #e6ebf5;
    --at-navy-muted: #adb8cc;
    --at-sky: #6ea0ff;
    --at-dot: #cfd6e4;
    --at-blue-bright: #2f6bf0;

    --at-page-rgb: 251, 250, 247;
    --at-white-rgb: 255, 255, 255;
    --at-tint-rgb: 238, 244, 255;
    --at-ink-rgb: 11, 19, 36;
    --at-muted-rgb: 89, 99, 122;
    --at-blue-rgb: 9, 82, 224;
    --at-navy-rgb: 9, 17, 36;
    --at-navy-raised-rgb: 19, 28, 51;
    --at-navy-deep-rgb: 6, 11, 22;
    --at-navy-text-rgb: 230, 235, 245;
    --at-sky-rgb: 110, 160, 255;
    --at-blue-hover-rgb: 7, 63, 184;
    --at-blue-bright-rgb: 47, 107, 240;

    --at-shadow-sm: 0 1px 2px rgba(11, 19, 36, .05), 0 4px 12px rgba(11, 19, 36, .04);
    --at-shadow: 0 10px 30px rgba(11, 19, 36, .08);
    --at-shadow-lg: 0 24px 64px rgba(11, 19, 36, .14);
    /* Podium metals (rijscholen/templates/podium.php, school-podium.php) */
    --at-gold: #c9971c;
    --at-silver: #9aa3ad;
    --at-bronze: #b26a2e;

    /* Accent: the exact complement of --at-blue (its RGB inverse, hue 39.6 against 219.6). Fills carry ink text;
       the ink shade is the same hue at a lightness that reads at small size (5.0:1 on the page). */
    --at-accent: #f6ad1f;
    --at-accent-hover: #e29809;
    --at-accent-ink: #936306;
    --at-accent-tint: #fef4e2;
    --at-accent-line: #fbdb9d;
    --at-accent-deep: #ba7e07;   /* the same hue at 3.3:1 on the page: the ring chart and its figure */
    --at-accent-rgb: 246, 173, 31;

    /* Exam app palette (CBR-style blue, sky and green tints it was built with) */

    --quiz-transition-speed: 0.15s;
    --quiz-transition-easing: ease-out;
    --quiz-touch-target: 44px;
    --quiz-content-bg: #e8eef5;
    --quiz-nav-height: 50px;
    --quiz-hint-bg: #e6f542;
    --quiz-feature-active-bg: #f5a623;
    --bs-gradient-btn-overlay: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.05) 100%);
    --bs-gradient-btn-overlay-hover: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 100%);

    /* Hulpmiddelen dock (Toerbuffel): dark in both colour modes, a real boundary like --quiz-* */
    --ll-surface: #0f172a;
    --ll-surface-raised: #1e293b;
    --ll-border: rgba(148, 163, 184, 0.35);
    --ll-text: #f8fafc;
    --ll-text-muted: #cbd5e1;
    --ll-accent: #38bdf8;
    --ll-accent-text: #0f172a;
    --ll-bar: #34d399;
    --ll-gold: #d4a017;
    --ll-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.35);
    --ll-btn-size: 3.25rem;
    --ll-gap: 0.375rem;
    --ll-offset: 0.75rem;
    --ll-radius-pill: 999px;
    --ll-radius-panel: 1rem;
    --ll-z: 1035;
    --ll-dock-height: calc(var(--ll-btn-size) + 2 * var(--ll-gap) + 2px);

    /* Exam app palette, frozen (the tints of the exam theme are derived from these) */
    --at-exam-sky: #0ea5e9;
    --at-exam-green: #10b981;

    --displace-top: 0px;
    --displace-bottom: env(safe-area-inset-bottom, 0px);
}

/* Light (default) mapped onto Bootstrap */
:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: var(--at-font);
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--at-ink);
    --bs-body-color-rgb: var(--at-ink-rgb);
    --bs-body-bg: var(--at-page);
    --bs-body-bg-rgb: var(--at-page-rgb);
    --bs-emphasis-color: var(--at-ink);
    --bs-emphasis-color-rgb: var(--at-ink-rgb);
    --bs-secondary-color: var(--at-muted);
    --bs-secondary-color-rgb: var(--at-muted-rgb);
    --bs-tertiary-color: var(--at-muted);
    --bs-tertiary-color-rgb: var(--at-muted-rgb);
    --bs-secondary-bg: var(--at-tint);
    --bs-secondary-bg-rgb: var(--at-tint-rgb);
    --bs-tertiary-bg: var(--at-white);
    --bs-tertiary-bg-rgb: var(--at-white-rgb);
    --bs-heading-color: var(--at-ink);

    --bs-primary: var(--at-blue);
    --bs-primary-rgb: var(--at-blue-rgb);
    --bs-primary-hover: var(--at-blue-hover);
    --bs-primary-text-emphasis: var(--at-blue-ink);
    --bs-primary-bg-subtle: var(--at-tint);
    --bs-primary-border-subtle: var(--at-blue-line);
    --bs-secondary: var(--at-accent);
    --bs-secondary-rgb: var(--at-accent-rgb);
    --bs-secondary-hover: var(--at-accent-hover);
    --bs-secondary-text-emphasis: var(--at-accent-ink);
    --bs-secondary-bg-subtle: var(--at-accent-tint);
    --bs-secondary-border-subtle: var(--at-accent-line);

    --bs-link-color: var(--at-blue);
    --bs-link-color-rgb: var(--at-blue-rgb);
    --bs-link-hover-color: var(--at-blue-hover);
    --bs-link-hover-color-rgb: var(--at-blue-hover-rgb);

    --bs-border-color: var(--at-line);
    --bs-border-color-translucent: rgba(var(--at-ink-rgb), .1);
    --bs-border-radius-sm: 8px;
    --bs-border-radius: 12px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: 18px;
    --bs-border-radius-xxl: 22px;
    --bs-border-radius-2xl: 22px;
    --bs-border-radius-pill: 999px;

    --bs-box-shadow-sm: var(--at-shadow-sm);
    --bs-box-shadow: var(--at-shadow);
    --bs-box-shadow-lg: var(--at-shadow-lg);
    --bs-focus-ring-width: .2rem;
    --bs-focus-ring-opacity: .8;
    --bs-focus-ring-color: rgba(var(--at-blue-rgb), var(--bs-focus-ring-opacity));
}

/* Navy bands: <section data-bs-theme="dark"> */
[data-bs-theme="dark"] {
    --bs-body-color: var(--at-navy-text);
    --bs-body-color-rgb: var(--at-navy-text-rgb);
    --bs-body-bg: var(--at-navy);
    --bs-body-bg-rgb: var(--at-navy-rgb);
    --bs-emphasis-color: var(--at-white);
    --bs-emphasis-color-rgb: var(--at-white-rgb);
    --bs-secondary-color: var(--at-navy-muted);
    --bs-secondary-color-rgb: var(--at-navy-text-rgb);
    --bs-tertiary-color: var(--at-navy-muted);
    --bs-tertiary-color-rgb: var(--at-navy-text-rgb);
    --bs-secondary-bg: var(--at-navy-deep);
    --bs-secondary-bg-rgb: var(--at-navy-deep-rgb);
    --bs-tertiary-bg: var(--at-navy-raised);
    --bs-tertiary-bg-rgb: var(--at-navy-raised-rgb);
    --bs-heading-color: var(--at-white);

    --bs-primary: var(--at-blue-bright);
    --bs-primary-rgb: var(--at-blue-bright-rgb);
    --bs-primary-hover: var(--at-blue);
    --bs-primary-text-emphasis: var(--at-sky);
    --bs-primary-bg-subtle: var(--at-navy-raised);
    --bs-primary-border-subtle: var(--at-navy-line);
    --bs-secondary: var(--at-accent);
    --bs-secondary-rgb: var(--at-accent-rgb);
    --bs-secondary-hover: var(--at-accent-hover);
    --bs-secondary-text-emphasis: var(--at-accent);
    --bs-secondary-bg-subtle: var(--at-navy-raised);
    --bs-secondary-border-subtle: var(--at-navy-line);
    --bs-light: var(--at-navy-text);
    --bs-light-rgb: var(--at-navy-text-rgb);
    --bs-dark: var(--at-navy);
    --bs-dark-rgb: var(--at-navy-rgb);

    --bs-link-color: var(--at-sky);
    --bs-link-color-rgb: var(--at-sky-rgb);
    --bs-link-hover-color: var(--at-white);
    --bs-link-hover-color-rgb: var(--at-white-rgb);

    --bs-border-color: var(--at-navy-line);
    --bs-border-color-translucent: rgba(var(--at-white-rgb), .12);
    --bs-box-shadow-sm: none;
    --bs-box-shadow: none;
    --bs-box-shadow-lg: none;
    --bs-focus-ring-color: rgba(var(--at-sky-rgb), var(--bs-focus-ring-opacity));

    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* The exam app keeps the values it was built with. The sky and green tints
   were derived from the old brand colours at :root, so they are written out. */
.exam-theme {
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: inherit;
    --bs-primary-bg-subtle: color-mix(in srgb, var(--at-exam-sky) 12%, white);
    --bs-primary-border-subtle: color-mix(in srgb, var(--at-exam-sky) 35%, white);
    --bs-primary-text-emphasis: color-mix(in srgb, var(--at-exam-sky) 60%, black);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--at-exam-green) 12%, white);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--at-exam-green) 35%, white);
    --bs-secondary-text-emphasis: color-mix(in srgb, var(--at-exam-green) 60%, black);
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--bs-primary-hover);
    --bs-link-hover-color-rgb: 2, 132, 199;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius: 0.375rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(14, 165, 233, 0.25);
    --bs-primary: #006591;
    --bs-primary-rgb: 0, 101, 145;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-primary-hover: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-secondary-hover: color-mix(in srgb, var(--bs-secondary) 85%, black);
    --quiz-info-hover: #0284c7;
    --quiz-danger-bg: #dc3545;
    --quiz-danger-hover: #bb2d3b;
    --quiz-feature-active-bg: #f5a623;
    --quiz-feature-active-bg-rgb: 245, 166, 35;
    --quiz-feature-active-hover: #d4890e;
    --site-nav-height: 30px;
    --displace-top: var(--site-nav-height);
    --displace-bottom: calc(var(--quiz-nav-height) + env(safe-area-inset-bottom, 0));
}

[data-bs-theme="dark"] .exam-theme {
    --bs-primary: #3a9fd5;
    --bs-primary-rgb: 58, 159, 213;
    --bs-secondary: #adb5bd;
    --bs-secondary-rgb: 173, 181, 189;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--bs-primary-hover);
    --bs-primary-hover: color-mix(in srgb, var(--bs-primary) 85%, white);
    --bs-secondary-hover: color-mix(in srgb, var(--bs-secondary) 85%, white);
    --quiz-info-hover: #0284c7;
    --quiz-danger-bg: #f87171;
    --quiz-danger-hover: #fca5a5;
    --quiz-feature-active-bg: #fbbf24;
    --quiz-feature-active-bg-rgb: 251, 191, 36;
    --quiz-feature-active-hover: #f59e0b;
}