/* =============================================================
   Soulan Jo — Design Tokens
   Single source of truth for brand colors and font.
   Must be loaded FIRST in every layout.
   ============================================================= */

/* Cairo font is loaded via <link> in each layout (avoids blocking @import) */

:root {
    /* ── Brand colors ───────────────────────────────────── */
    --sj-navy:          #001C49;
    --sj-navy-dark:     #001030;
    --sj-navy-darker:   #000820;
    --sj-navy-bright:   #003380;
    --sj-blue:          #0099FF;
    --sj-blue-hover:    #0077cc;
    --sj-blue-press:    #0088e0;

    /* RGB splits for rgba() usage */
    --sj-navy-rgb:      0, 28, 73;
    --sj-navy-dark-rgb: 0, 16, 48;
    --sj-blue-rgb:      0, 153, 255;

    /* ── Primary scale (template utilities) ─────────────── */
    --primary-50:  #e6f0ff;
    --primary-100: #b3cfff;
    --primary-200: #80aaff;
    --primary-300: #4d88ff;
    --primary-400: #1a6fff;
    --primary-500: #0057d9;
    --primary-600: #001C49;
    --primary-700: #001030;
    --primary-800: #000820;
    --primary-900: #00040f;
    --primary-light:       rgba(0, 28, 73, 0.15);
    --primary-light-white: rgba(0, 28, 73, 0.25);

    /* ── Bootstrap primary overrides ────────────────────── */
    --bs-primary:          #001C49;
    --bs-primary-rgb:      0, 28, 73;
    --bs-link-color:       #0099FF;
    --bs-link-color-rgb:   0, 153, 255;
    --bs-link-hover-color: #0077cc;

    /* ── Font ────────────────────────────────────────────── */
    --sj-font: 'Cairo', 'Inter', sans-serif;

    /* ── Form helpers ────────────────────────────────────── */
    --border:  #b3d4f5;
    --form-bg: #f0f6ff;
}

/* ── Apply Cairo to all UI elements ─────────────────────── */
body,
.sidebar,
.navbar-header,
input, select, textarea, button, .btn,
.form-control, .form-select {
    font-family: var(--sj-font) !important;
}