/**
 * @file tokens.css
 * @brief Design-token source of truth for the GTender Control Panel brand palette (issue #279, ADR #278, EPIC #277 UI consistency).
 * @note Single definition site for the brand-blue palette that was previously
 *       duplicated as raw hex literals across BootstrapRenderer's inline <style>,
 *       settings.css, reports.css and payment-modal.css. The ADR-frozen canonical
 *       custom properties are the --gt-color-* / --gt-gradient-* names; every
 *       authored stylesheet must reference these instead of repeating the hex
 *       values, and the .gitea/workflows/ui-consistency-drift-check.yml gate
 *       enforces this. The historic --glt-brand-* names are retained as aliases
 *       (var() indirection onto the canonical tokens) so the not-yet-migrated
 *       M4 stylesheets (settings.css, reports.css, payment-modal.css) and the
 *       drift-check contract keep resolving; they are removed when M4 migrates
 *       those files. Token values are byte-identical to the historic literals so
 *       rendering is unchanged. Linked first (before every other stylesheet) in
 *       BootstrapRenderer::renderHead() so the variables resolve everywhere.
 * @copyright Copyright (c) 2026 GLT Design. All rights reserved.
 */

:root {
    /* Canonical brand-blue palette (ADR #278). Values equal the historic literals. */
    --gt-color-primary: #0d6efd;
    --gt-color-primary-hover: #0b5ed7;
    --gt-color-primary-active: #0a58ca;

    /* AA-compliant accent for small / normal-size brand-blue foreground text
       (issue #342, child of the #336 title-contrast audit). Brand #0d6efd used as
       small text derives to only 4.50:1 on #fff and 4.27:1 on the #f8f9fa page
       background — at/below the WCAG 2.1 AA-normal 4.5:1 threshold; this darker
       accent clears it with margin (7.26:1 on #fff, 6.89:1 on #f8f9fa). It governs
       small eyebrow/label foreground text only — the brand --gt-color-primary above
       is unchanged, so large headings/buttons keep brand blue (which passes the 3:1
       large-text threshold). */
    --gt-color-primary-text: #0a4fc0;

    /* RGB triple for rgba() composition (focus rings, tint fills). */
    --gt-color-primary-rgb: 13, 110, 253;

    /* Brand header gradient (card / section headers). */
    --gt-gradient-header: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);

    /* Brand success / "active" green (issue #291 owner ratification). Seeded from
       the app's existing Bootstrap-success literal (#198754), which is already used
       for status badges, so the toggle on-state introduces no third green. The RGB
       triple feeds rgba() composition (the toggle focus ring). */
    --gt-color-success: #198754;
    --gt-color-success-rgb: 25, 135, 84;

    /* Backward-compatible aliases (EPIC #277). Retained until the M4 CSS-dedup
       child migrates settings.css / reports.css / payment-modal.css onto the
       canonical --gt-color-* names. */
    --glt-brand-primary: var(--gt-color-primary);
    --glt-brand-primary-hover: var(--gt-color-primary-hover);
    --glt-brand-primary-active: var(--gt-color-primary-active);
    --glt-brand-primary-rgb: var(--gt-color-primary-rgb);
    --glt-brand-header-gradient: var(--gt-gradient-header);

    /* Toggle / Switch component primitive (issue #291, owner visual contract
       2026-06-08). The track is a green iOS-style pill (radius 999px) with a white
       circular knob (radius 50%) that carries a soft drop shadow and slides on a
       0.25s transition. The on-state fill is the tokenized brand success green
       (--gt-color-success, owner-recommended #198754 — pending ratification vs
       #16a34a) so the switch stays consistent with the app's existing success
       colour rather than introducing a third green; the off-track is a neutral
       grey and the focus ring composes the success rgb triple. components.css
       references these var() names only — it carries no raw palette literal.
       Geometry mirrors the owner's supplied design: 54x30 track, 24x24 knob,
       3px offset. */
    --gt-toggle-track-off: #cbd5e1;
    --gt-toggle-track-border: #adb5bd;
    --gt-toggle-track-on: var(--gt-color-success);
    --gt-toggle-knob: #ffffff;
    --gt-toggle-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --gt-toggle-focus-ring: rgba(var(--gt-color-success-rgb), 0.25);
    --gt-toggle-track-radius: 999px;
    --gt-toggle-knob-radius: 50%;
    --gt-toggle-track-width: 54px;
    --gt-toggle-track-height: 30px;
    --gt-toggle-knob-size: 24px;
    --gt-toggle-knob-gap: 3px;
    --gt-toggle-track-width-compact: 42px;
    --gt-toggle-track-height-compact: 24px;
    --gt-toggle-knob-size-compact: 18px;
}