/* UnitedLang brand token overrides (shared base: static/css/variables.css)
 *
 * Landing palette from otrianhq/unitedlang-website@90a1f288ee4dbf09de1d576b37c379493af57d2f
 * Hover/active shades derived as color-mix(primary 88%/80%, black).
 */
:root {
    /* Landing palette */
    --background: #f6f4ef;
    --surface: #fffdf8;
    --ink: #16201f;
    --muted: #5d6865;
    --primary: #0b6b5f;
    --primary-soft: #d9ebe6;
    --signal: #c9472c;
    --signal-soft: #f4d8cf;
    --caption: #1e7898;
    --border: #d8d5ca;

    /* Derived hover / active */
    --primary-hover: #0a5e54;
    --primary-active: #09564c;
    --primary-hover-rgb: 10, 94, 84;
    --primary-color-rgb: 11, 107, 95;
    --primary-rgb: 11, 107, 95;
    --signal-hover: #b13e27;
    --caption-hover: #1a6a86;

    /* App token aliases */
    --primary-color: var(--primary);
    --primary-light: rgba(11, 107, 95, 0.1);
    --primary-color-light: rgba(11, 107, 95, 0.16);
    --primary-color-dark: var(--primary-hover);
    --primary-dark: var(--primary-hover);
    /* Accent stays primary-adjacent — never caption (caption is transcript-only). */
    --accent-color: var(--primary);
    --accent-hover: var(--primary-hover);
    --light-accent: var(--primary-soft);

    --signal-color: var(--signal);
    --signal-color-soft: var(--signal-soft);
    --caption-color: var(--caption);

    --text-color: var(--ink);
    --text-dark: var(--ink);
    --text-light: var(--muted);
    --text-lighter: #7a8682;
    --text-muted: var(--muted);
    --text-secondary: var(--muted);
    --text-primary: var(--ink);
    --text-base: var(--ink);

    --bg-color: var(--background);
    --bg-light: var(--background);
    --bg-lighter: var(--surface);
    --bg-color-light: var(--surface);
    --bg-hover: #efece4;
    --white: var(--surface);

    --gray-50: #f6f4ef;
    --gray-100: #efece4;
    --gray-200: #e4e0d4;
    --gray-300: var(--border);
    --gray-400: #9aa39f;
    --gray-500: var(--muted);
    --gray-600: #46514e;
    --gray: var(--muted);
    --gray-dark: var(--ink);

    --border-color: var(--border);
    --border-light: #e8e5da;
    --border-lighter: #f0ede4;
    --border-color-light: #e8e5da;

    --table-hover-bg: var(--gray-50);
    --table-active-bg: var(--primary-soft);
    --table-striped-bg: #faf8f3;
}


/* Bootstrap 5 utilities and button variants consume their own variables. */
:root {
    --bs-primary: #0b6b5f;
    --bs-primary-rgb: 11, 107, 95;
    --bs-link-color: #0b6b5f;
    --bs-link-hover-color: #0a5e54;
    --bs-link-color-rgb: 11, 107, 95;
    --bs-link-hover-color-rgb: 10, 94, 84;
    --bs-body-bg: #f6f4ef;
    --bs-body-color: #16201f;
    --bs-border-color: #d8d5ca;
}

.btn-primary {
    --bs-btn-color: #fffdf8;
    --bs-btn-bg: #0b6b5f;
    --bs-btn-border-color: #0b6b5f;
    --bs-btn-hover-color: #fffdf8;
    --bs-btn-hover-bg: #0a5e54;
    --bs-btn-hover-border-color: #0a5e54;
    --bs-btn-focus-shadow-rgb: 11, 107, 95;
    --bs-btn-active-color: #fffdf8;
    --bs-btn-active-bg: #09564c;
    --bs-btn-active-border-color: #09564c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fffdf8;
    --bs-btn-disabled-bg: #0b6b5f;
    --bs-btn-disabled-border-color: #0b6b5f;
}

.btn-outline-primary {
    --bs-btn-color: #0b6b5f;
    --bs-btn-border-color: #0b6b5f;
    --bs-btn-hover-color: #fffdf8;
    --bs-btn-hover-bg: #0b6b5f;
    --bs-btn-hover-border-color: #0b6b5f;
    --bs-btn-focus-shadow-rgb: 11, 107, 95;
    --bs-btn-active-color: #fffdf8;
    --bs-btn-active-bg: #09564c;
    --bs-btn-active-border-color: #09564c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0b6b5f;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0b6b5f;
    --bs-gradient: none;
}