/* static/css/faculty_app/tokens.css — the design tokens, loaded FIRST on every page
   (base.html, the login page, the public profile, the self-edit form).

   Phase 7 (2026-10). The values are the ones the pages already used: moving
   them here changed nothing a reader sees. New CSS takes its colours from
   these variables; tests/audit_frontend.py fails when the number of colours
   written by hand grows. The quartile palette is the owner's navy one (Phase 7
   C, 2026-10-19), the same in every chart, badge and PDF. */

:root {
    /* brand and surfaces (moved unchanged from base.css) */
    --navy:       #1a2d4a;
    --navy-dk:    #152340;
    --blue:       #2563eb;
    --blue-dk:    #1d4ed8;
    --slate:      #475569;
    --danger:     #dc2626;
    --danger-dk:  #b91c1c;
    --surface:    #ffffff;
    --on-fill:    #ffffff;   /* text on a coloured fill (buttons, badges, dark table heads) */
    --bg:         #f1f4f8;
    --border:     #e2e8f0;
    --text:       #1e293b;
    --text-muted: #5b6b7f;   /* 5.45:1 on white, 4.9 on the page's light tints (was #64748b: 4.3 on them) */
    --radius:     6px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --transition: 0.18s ease;

    /* status */
    --ok:         #15803d;
    --ok-dk:      #166534;
    --warn:       #b45309;
    --warn-bg:    #fef3c7;   /* a warning button or note: dark text on amber */
    --warn-fill:  #fbbf24;

    /* neutral surfaces (kit.css: light buttons, notes, table heads) */
    --neutral-bg:   #f8fafc;
    --neutral-line: #cbd5e1;
    --neutral-text: #334155;

    /* quartiles: ONE palette for pages, charts and PDFs (reporting/charts.py
       QUARTILE_COLORS, palette.js). --qN fills a chart; --qN-ink carries white
       text (>= 4.5:1) and is the text colour on --qN-tint (>= 4.5:1). */
    --q1: #1B3A6B;  --q2: #27AE60;  --q3: #E67E22;  --q4: #8E44AD;  --q0: #94A3B8;
    --q1-ink: #1B3A6B;  --q2-ink: #1B7943;  --q3-ink: #A05817;  --q4-ink: #8E44AD;  --q0-ink: #646E7D;
    --q1-tint: #DFE3EA; --q2-tint: #E0F3E8; --q3-tint: #FBECE0; --q4-tint: #EFE4F3; --q0-tint: #F0F2F5;

    /* keyboard focus */
    --focus-ring: #2563eb;
}

/* ── One typeface ─────────────────────────────────────────────────
   Browsers give form controls their own font (Arial on Windows), so every
   filter, field and button read in a different face from the page around it
   (design review, 2026-10-20). */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ── Keyboard focus is always visible ───────────────────────────────
   Forty-four rules across the stylesheets removed the outline on :focus
   (most replaced it with a border colour a keyboard user can miss). Keyboard
   focus — :focus-visible — now always shows a ring, whatever a page's own
   CSS says; a mouse click on a button shows none. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.select2-selection:focus-visible {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}

/* English inside an Arabic page (a reference, a DOI, a journal name): an element
   bidi.js found to have Latin letters and no Arabic one reads by its own first
   letter, so its full stop and its DOI read correctly. Every line with Arabic in it
   is untouched. The five Arabic translations that begin with a Latin word
   ("Scopus ...") start with U+200F as well. */
html[dir="rtl"] [data-ltr] {
    unicode-bidi: plaintext;
    text-align: match-parent;
}