/* ============================================================================
 * CAEPREVEN — Design tokens
 * ----------------------------------------------------------------------------
 * Single source of truth for color, spacing, typography, radius, shadow and
 * motion. Loaded BEFORE custom.css and AFTER the vendor template (app.min.css)
 * so it can override Bootstrap variables.
 *
 * Naming:
 *   --cae-*      → semantic tokens, used by app code (custom.css, templates).
 *   --bs-*       → Bootstrap variables, overridden here when we want the whole
 *                  Bootstrap component library to follow the brand.
 * ============================================================================ */

:root {
    /* ---- Brand palette ----------------------------------------------------
     * The single brand blue. If marketing changes the brand color, edit ONLY
     * --cae-primary and every button, link, focus ring, badge follows.
     */
    --cae-primary:           #108dff;
    --cae-primary-hover:     #0c74d3;
    --cae-primary-subtle:    #cfe8ff;
    --cae-primary-emphasis:  #063866;

    /* ---- Semantic status colors ------------------------------------------ */
    --cae-success:           #198754;
    --cae-success-subtle:    #d1e7dd;
    --cae-success-emphasis:  #0a3622;

    --cae-danger:            #dc3545;
    --cae-danger-subtle:     #f8d7da;
    --cae-danger-emphasis:   #58151c;

    --cae-warning:           #ffc107;
    --cae-warning-subtle:    #fff3cd;
    --cae-warning-emphasis:  #664d03;

    --cae-info:              #0dcaf0;
    --cae-info-subtle:       #cff4fc;
    --cae-info-emphasis:     #055160;

    /* ---- Neutral / surface ------------------------------------------------ */
    --cae-surface:           #ffffff;          /* card / page background      */
    --cae-surface-muted:     #f8f9fa;          /* striped rows, subtle bg     */
    --cae-border:            #dee2e6;          /* default border              */
    --cae-border-strong:     #ced4da;          /* form input border           */
    --cae-text:              #212529;          /* body text                   */
    --cae-text-muted:        #6c757d;          /* labels, helper text         */

    /* ---- Spacing scale (4 / 8 px grid) -----------------------------------
     * Use these tokens in custom.css instead of magic numbers. Bootstrap
     * utility classes (p-1..p-5, m-1..m-5) follow the same scale.
     */
    --cae-space-0:    0;
    --cae-space-1:    0.25rem;   /*  4px */
    --cae-space-2:    0.5rem;    /*  8px */
    --cae-space-3:    0.75rem;   /* 12px */
    --cae-space-4:    1rem;      /* 16px */
    --cae-space-5:    1.5rem;    /* 24px */
    --cae-space-6:    2rem;      /* 32px */
    --cae-space-7:    3rem;      /* 48px */
    --cae-space-8:    4rem;      /* 64px */

    /* ---- Typography ------------------------------------------------------- */
    --cae-font-family-base: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

    --cae-font-xs:    0.75rem;   /* 12px — captions, helper text             */
    --cae-font-sm:    0.875rem;  /* 14px — secondary, table cells            */
    --cae-font-base:  1rem;      /* 16px — body                              */
    --cae-font-lg:    1.125rem;  /* 18px — emphasized body                   */
    --cae-font-xl:    1.25rem;   /* 20px — section heading                   */
    --cae-font-2xl:   1.5rem;    /* 24px — page heading                      */
    --cae-font-3xl:   2rem;      /* 32px — display                           */

    --cae-font-weight-regular: 400;
    --cae-font-weight-medium:  500;
    --cae-font-weight-semibold: 600;
    --cae-font-weight-bold:    700;

    --cae-line-height-tight: 1.2;
    --cae-line-height-base:  1.5;
    --cae-line-height-loose: 1.75;

    /* ---- Border radius ---------------------------------------------------- */
    --cae-radius-sm:    0.25rem;   /*  4px — chips, small badges             */
    --cae-radius-md:    0.5rem;    /*  8px — cards, inputs                   */
    --cae-radius-lg:    1rem;      /* 16px — modals, prominent surfaces      */
    --cae-radius-pill:  50rem;     /*       — pills, status badges           */
    --cae-radius-circle: 50%;      /*       — avatars, icon buttons          */

    /* ---- Shadow ----------------------------------------------------------- */
    --cae-shadow-sm:    0 1px 2px  rgba(0, 0, 0, 0.04);
    --cae-shadow-md:    0 2px 8px  rgba(0, 0, 0, 0.08);
    --cae-shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);

    /* ---- Decorative gradient ---------------------------------------------
     * Used by feature panels (upload indicator, mandatory-documentation
     * highlight, etc.). Independent from --cae-primary because these are
     * decorative, not brand. Change here to retheme all of them at once.
     */
    --cae-gradient-feature:
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --cae-gradient-feature-shadow-rgb: 102, 126, 234;

    /* ---- Motion ----------------------------------------------------------- */
    --cae-transition-fast:  0.15s ease-in-out;
    --cae-transition-base:  0.3s  ease-in-out;
    --cae-transition-slow:  0.5s  ease-in-out;

    /* ---- Z-index scale ---------------------------------------------------- */
    --cae-z-dropdown: 1000;
    --cae-z-sticky:   1020;
    --cae-z-fixed:    1030;
    --cae-z-modal:    1050;
    --cae-z-toast:    1080;


    /* ========================================================================
     * Bootstrap overrides
     * ------------------------------------------------------------------------
     * We re-declare key --bs-* variables so every Bootstrap component (buttons,
     * links, focus rings, alerts, form-control:focus, etc.) inherits the brand
     * palette without us having to touch each component.
     * ======================================================================== */

    --bs-primary:           var(--cae-primary);
    --bs-primary-rgb:       16, 141, 255;
    --bs-link-color:        var(--cae-primary);
    --bs-link-hover-color:  var(--cae-primary-hover);

    --bs-border-color:      var(--cae-border);
    --bs-body-color:        var(--cae-text);
    --bs-body-bg:           var(--cae-surface);
}


/* ============================================================================
 * Dark mode overrides
 * ----------------------------------------------------------------------------
 * Activated by Bootstrap 5.3's data-bs-theme="dark" on <html>, toggled from
 * the navbar moon icon (see core/static/assets/js/head.js).
 * The brand --cae-primary stays the same; surfaces, text and -subtle/-emphasis
 * tones are inverted so subtle backgrounds stay subtle on a dark canvas.
 * ============================================================================ */
[data-bs-theme="dark"] {
    /* Neutrals invert */
    --cae-surface:           #1a1d21;
    --cae-surface-muted:     #22262b;
    --cae-border:            #3a3f45;
    --cae-border-strong:     #4a5058;
    --cae-text:              #e9ecef;
    --cae-text-muted:        #adb5bd;

    /* Brand stays, but the subtle/emphasis pair flips so chips/badges that
     * use them keep their "subtle background, strong text" relationship. */
    --cae-primary-subtle:    #08365e;
    --cae-primary-emphasis:  #9ed1ff;

    --cae-success-subtle:    #0a3622;
    --cae-success-emphasis:  #75d4a8;

    --cae-danger-subtle:     #58151c;
    --cae-danger-emphasis:   #ef9aa3;

    --cae-warning-subtle:    #664d03;
    --cae-warning-emphasis:  #ffe175;

    --cae-info-subtle:       #055160;
    --cae-info-emphasis:     #6edff6;

    /* Shadows are stronger on dark canvas to keep elevation perceptible */
    --cae-shadow-sm:    0 1px 2px  rgba(0, 0, 0, 0.4);
    --cae-shadow-md:    0 2px 8px  rgba(0, 0, 0, 0.5);
    --cae-shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.6);
}