/* =====================================================================
   EngageSAE Console theme — DESIGN TOKENS
   ---------------------------------------------------------------------
   Custom properties only. Nothing in this file paints anything on its
   own, so it is always safe to load: a custom property has no effect
   until something consumes it.

   Deliberately declared on unscoped :root (NOT on .engage-console) so
   that pages which still carry their own inline `var(--v3-*)` rules keep
   resolving to real colours while the theme kill-switch is off. Scoping
   the tokens would make theme-off render those pages colourless rather
   than "the old look".

   Load order: this file must come FIRST, before every other theme file.
   ===================================================================== */

:root {
    /* ---------- Brand ---------- */
    --v3-blue: #005195;   /* primary brand / SAE blue */
    --v3-blue-2: #0a6bc0; /* lighter brand, links + hover */
    --v3-navy: #012a52;   /* headings, deep accents */

    /* ---------- Neutrals ---------- */
    --v3-ink: #16212e;    /* body text */
    --v3-muted: #6a7889;  /* secondary / helper text */
    --v3-line: #e6eaf1;   /* hairline borders */
    --v3-canvas: #f3f5f9; /* page background behind cards */
    --v3-card: #ffffff;   /* card / panel surface */

    /* ---------- Status ---------- */
    --v3-danger: #c0392b;
    --v3-danger-bg: #fdecea;
    --v3-danger-line: #f5c6c2;
    --v3-success: #12805c;
    --v3-success-bg: #e4f6ee;
    --v3-success-line: #c4e9d8;
    --v3-warning: #7a5a12;
    --v3-warning-bg: #fdf6e3;
    --v3-warning-line: #f3e2b5;
    --v3-info: #1c5a8f;
    --v3-info-bg: #eaf3fb;
    --v3-info-line: #c9e1f5;

    /* ---------- Category accent palette ----------
       Used by the dashboard tiles/metrics and the MenuGroup tile tiers.
       Each pair is a light chip background + a readable foreground. */
    --v3-a1-bg: #e7f0fb;  --v3-a1-fg: #0a5aa8;  --v3-a1-line: #a9cbef;
    --v3-a2-bg: #e1f6f0;  --v3-a2-fg: #0f8a6d;  --v3-a2-line: #a7e0cf;
    --v3-a3-bg: #ecebfb;  --v3-a3-fg: #5b4bc4;  --v3-a3-line: #c3bdf0;
    --v3-a4-bg: #fcefd7;  --v3-a4-fg: #b0741a;  --v3-a4-line: #f0d29a;
    --v3-a5-bg: #fce7ed;  --v3-a5-fg: #c14063;  --v3-a5-line: #f2bccb;
    --v3-a6-bg: #e9f6e1;  --v3-a6-fg: #4f8a2a;  --v3-a6-line: #c2e3ab;

    /* ---------- Shape ---------- */
    --v3-radius: 18px;      /* cards / panels */
    --v3-radius-md: 15px;   /* tiles */
    --v3-radius-sm: 11px;   /* inputs, buttons */

    /* ---------- Elevation ---------- */
    --v3-shadow-card: 0 1px 2px rgba(16, 40, 70, .04), 0 8px 26px rgba(16, 40, 70, .05);
    --v3-shadow-sub: 0 1px 2px rgba(16, 40, 70, .04), 0 6px 18px rgba(16, 40, 70, .04);
    --v3-shadow-hover: 0 12px 26px rgba(16, 40, 70, .10);
    --v3-focus-ring: 0 0 0 3px rgba(10, 107, 192, .12);

    /* ---------- Shell metrics ----------
       The site header is position:fixed and its height varies with auth
       state (the "you are visiting" bar is hidden for anonymous users and
       empty without an sgc). This fallback matches a logged-in header;
       shell.js overwrites it at runtime with the measured height so the
       sidebar/content offsets are always correct. See shell.css. */
    --v3-header-h: 140px;
    --v3-sidebar-w: 270px;
}