/* ==========================================================================
   InfiLMS — Brand base (Learn • Train • Grow)
   Fonts + design tokens shared by the website, dashboards and admin panel.
   Presentation only.
   ========================================================================== */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    /* Brand palette — sampled from the InfiLMS logo */
    --il-navy-950: #04122c;
    --il-navy-900: #061c45;
    --il-navy: #013376;          /* "Infi" wordmark */
    --il-blue: #0b5fc1;          /* cap, "i" and book */
    --il-blue-2: #0077ca;        /* book page */
    --il-cyan: #1aa6e8;
    --il-orange: #ff7a12;        /* "LMS" wordmark */
    --il-orange-deep: #fe5f0f;
    --il-amber: #fe9a04;         /* pixels / book */

    --il-bg: #f3f6fb;
    --il-surface: #ffffff;
    --il-surface-2: #f6f8fc;
    --il-border: #e3e9f2;
    --il-border-strong: #d3dce9;
    --il-text: #13213a;
    --il-text-2: #3b4964;
    --il-muted: #6a7891;

    --il-success: #12a46b;
    --il-danger: #e5484d;
    --il-warning: #f5a20a;
    --il-info: #0aa5d8;

    --il-radius-sm: 8px;
    --il-radius: 12px;
    --il-radius-lg: 18px;
    --il-shadow-xs: 0 1px 2px rgba(6, 28, 69, .06);
    --il-shadow-sm: 0 1px 2px rgba(6, 28, 69, .04), 0 8px 22px -12px rgba(6, 28, 69, .18);
    --il-shadow: 0 2px 4px rgba(6, 28, 69, .04), 0 22px 44px -20px rgba(6, 28, 69, .28);
    --il-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Accent = the primary colour chosen in Admin → Settings → Branding (defaults to InfiLMS blue) */
    --il-primary: var(--theme, var(--il-blue));
    --il-accent: var(--theme-2, var(--il-orange));
    --il-primary-soft: color-mix(in srgb, var(--il-primary) 10%, #fff);
    --il-primary-soft-2: color-mix(in srgb, var(--il-primary) 18%, #fff);
    --il-primary-ring: color-mix(in srgb, var(--il-primary) 22%, transparent);
    --il-primary-grad: linear-gradient(135deg, var(--il-primary) 0%, color-mix(in srgb, var(--il-primary) 60%, var(--il-cyan)) 100%);
    --il-brand-grad: linear-gradient(120deg, var(--il-navy-900) 0%, var(--il-navy) 45%, var(--il-blue) 100%);
    --il-accent-grad: linear-gradient(135deg, var(--il-amber) 0%, var(--il-orange-deep) 100%);

    /* Logo motif: graduation cap pixels */
    --il-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120' fill='none'%3E%3Crect x='150' y='18' width='22' height='22' rx='5' fill='%23fe9a04' fill-opacity='.85'/%3E%3Crect x='124' y='44' width='18' height='18' rx='4' fill='%231aa6e8' fill-opacity='.7'/%3E%3Crect x='178' y='52' width='16' height='16' rx='4' fill='%231aa6e8' fill-opacity='.5'/%3E%3Crect x='150' y='76' width='14' height='14' rx='3' fill='%23fe9a04' fill-opacity='.55'/%3E%3Cpath d='M20 70 92 40l72 30-72 30z' fill='%23ffffff' fill-opacity='.08'/%3E%3Cpath d='M48 82v18c14 10 74 10 88 0V82' stroke='%23ffffff' stroke-opacity='.10' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

::selection { background: var(--il-primary-soft-2); color: var(--il-navy-900); }
* { scrollbar-width: thin; scrollbar-color: #c4cfde transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c9d3e1; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }