/* ===================================================================
   Vikaradmin – Design tokens
   -------------------------------------------------------------------
   Apply ONE theme class + (optionally) one density class to the app
   shell element, e.g.:

       <div class="va-app va-theme-b va-density-comfortable">…</div>

   All component styling reads these custom properties, so re-theming
   never requires touching component CSS.

   Browser support: relies on CSS custom properties and color-mix()
   (all evergreen browsers from mid-2023). For older targets, replace
   the color-mix() tints with the pre-computed hex values noted inline.
   =================================================================== */

/* ---- Base: shared tokens (theme-independent) --------------------- */
.va-app {
  /* shape */
  --va-radius: 12px;                               /* card radius — override inline to taste (0–18px) */
  --va-radius-sm: calc(var(--va-radius) * 0.66);   /* inputs, buttons, chips */
  --va-density: 1;                                 /* spacing multiplier (see density classes) */

  /* type */
  --va-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* surfaces & text (light canvas, shared across themes) */
  --va-card: #ffffff;
  --va-border: #e7ecf2;
  --va-border-soft: #eef2f6;
  --va-text: #2b3648;
  --va-text-muted: #7b8798;
  --va-text-faint: #9aa6b4;
  --va-heading: #1b2533;

  /* accent-derived tints (resolve from --va-accent per theme) */
  --va-accent-fg: #ffffff;
  --va-accent-weak:  color-mix(in srgb, var(--va-accent) 11%, #ffffff);
  --va-accent-weak2: color-mix(in srgb, var(--va-accent) 16%, #ffffff);
  --va-accent-strong: color-mix(in oklab, var(--va-accent), #05080d 20%);
  --va-link: color-mix(in oklab, var(--va-accent), #05080d 6%);

  /* semantic status (shared) */
  --va-ok: #2f9e6a;       --va-ok-bg: #e7f5ee;
  --va-warn: #d6584e;     --va-warn-bg: #fcebe9;
  --va-pending: #9aa6b4;  --va-pending-bg: #eef1f5;
  --va-proc: #e0922f;     --va-proc-bg: #fdf2e3;
  --va-pdf: #3a8f5a;      --va-pdf-bg: #e9f4ed;

  /* chart support */
  --va-grid: #e9edf2;
  --va-axis: #9aa6b4;
}

/* ---- Density (spacing multiplier) -------------------------------- */
.va-density-compact     { --va-density: 0.82; }
.va-density-comfortable { --va-density: 1; }
.va-density-spacious    { --va-density: 1.22; }

/* ===================================================================
   THEMES — each sets the accent, canvas, chart palette and sidebar.
   =================================================================== */

/* ---- A · Refined Dark -------------------------------------------- */
.va-theme-a {
  --va-accent: #2f6fe0;
  --va-canvas: #f3f5f9;
  --va-c1: #2f6fe0; --va-c2: #6aa3f0; --va-c3: #1f9e8a;
  --va-c4: #9b8cf0; --va-c5: #9aa6b4; --va-c6: #e8a13c;

  --va-sb-bg: #161b26;
  --va-sb-fg: #e7ecf3;
  --va-sb-muted: rgba(231,236,243,.46);
  --va-sb-active-bg: rgba(255,255,255,.07);
  --va-sb-active-fg: #ffffff;
  --va-sb-icon: rgba(231,236,243,.62);
  --va-sb-border: rgba(255,255,255,.07);
  --va-sb-logo: #ffffff;
  --va-sb-rail: var(--va-accent);
}

/* ---- B · Clinical Teal (recommended default) --------------------- */
.va-theme-b {
  --va-accent: #0d7d80;
  --va-canvas: #eef3f3;
  --va-c1: #0d7d80; --va-c2: #3aa6a0; --va-c3: #7cc5bc;
  --va-c4: #e8a13c; --va-c5: #6f8a93; --va-c6: #d4806e;

  --va-sb-bg: #0c3940;
  --va-sb-fg: #dcebec;
  --va-sb-muted: rgba(220,235,236,.52);
  --va-sb-active-bg: rgba(255,255,255,.10);
  --va-sb-active-fg: #ffffff;
  --va-sb-icon: rgba(220,235,236,.66);
  --va-sb-border: rgba(255,255,255,.09);
  --va-sb-logo: #ffffff;
  --va-sb-rail: #5fd0c8;
}

/* ---- C · Light & Open -------------------------------------------- */
.va-theme-c {
  --va-accent: #1f4fd1;
  --va-canvas: #f4f7fc;
  --va-c1: #1f4fd1; --va-c2: #5b7fe0; --va-c3: #2a9d8f;
  --va-c4: #8a6cf0; --va-c5: #9aa6b4; --va-c6: #e8a13c;

  --va-sb-bg: #ffffff;
  --va-sb-fg: #2b3648;
  --va-sb-muted: #97a3b4;
  --va-sb-active-bg: var(--va-accent-weak);
  --va-sb-active-fg: var(--va-accent);
  --va-sb-icon: #8a97a8;
  --va-sb-border: #e6ebf2;
  --va-sb-logo: var(--va-heading);
  --va-sb-rail: var(--va-accent);
}

/* ===================================================================
   Optional: mix a sidebar treatment independently of the theme by
   adding one of these AFTER the theme class.
   =================================================================== */
.va-sidebar-dark {
  --va-sb-bg: #161b26; --va-sb-fg: #e7ecf3; --va-sb-muted: rgba(231,236,243,.46);
  --va-sb-active-bg: rgba(255,255,255,.07); --va-sb-active-fg: #fff;
  --va-sb-icon: rgba(231,236,243,.62); --va-sb-border: rgba(255,255,255,.07);
  --va-sb-logo: #fff; --va-sb-rail: var(--va-accent);
}
.va-sidebar-teal {
  --va-sb-bg: #0c3940; --va-sb-fg: #dcebec; --va-sb-muted: rgba(220,235,236,.52);
  --va-sb-active-bg: rgba(255,255,255,.10); --va-sb-active-fg: #fff;
  --va-sb-icon: rgba(220,235,236,.66); --va-sb-border: rgba(255,255,255,.09);
  --va-sb-logo: #fff; --va-sb-rail: #5fd0c8;
}
.va-sidebar-light {
  --va-sb-bg: #fff; --va-sb-fg: #2b3648; --va-sb-muted: #97a3b4;
  --va-sb-active-bg: var(--va-accent-weak); --va-sb-active-fg: var(--va-accent);
  --va-sb-icon: #8a97a8; --va-sb-border: #e6ebf2;
  --va-sb-logo: var(--va-heading); --va-sb-rail: var(--va-accent);
}
.va-sidebar-accent {
  --va-sb-bg: color-mix(in oklab, var(--va-accent), #05080d 62%);
  --va-sb-fg: rgba(255,255,255,.9); --va-sb-muted: rgba(255,255,255,.5);
  --va-sb-active-bg: rgba(255,255,255,.12); --va-sb-active-fg: #fff;
  --va-sb-icon: rgba(255,255,255,.7); --va-sb-border: rgba(255,255,255,.12);
  --va-sb-logo: #fff; --va-sb-rail: rgba(255,255,255,.85);
}