/* ============================================================
   LEXICON DESIGN TOKENS — Dark Themes
   Dark Mode + Dark High Contrast
   ============================================================ */

/* ----------------------------------------------------------
   Dark Mode
   Activate: <html data-theme="dark"> or <html class="dark">
---------------------------------------------------------- */
.dark, [data-theme="dark"] {

  /* Focus ring — inner dark + outer primary-l0 (inverted for dark bg) */
  --focus-ring: 0 0 0 2px var(--color-dark, #1C1C24), 0 0 0 4px var(--color-primary-l0, #7AA8FF);

  /* Primary */
  --color-primary-d3: #D6E4FF;
  --color-primary-d2: #D6E4FF;
  --color-primary-d1: #7AA8FF;
  --color-primary: #6198FF;
  --color-primary-l0: #0F62FF;
  --color-primary-l1: #004CDB;
  --color-primary-l2: #003AA8;
  --color-primary-l3: #001A4D;

  /* Secondary */
  --color-secondary: #B3B3C6;
  --color-secondary-l0: #9A9CB2;
  --color-secondary-l1: #7D809C;
  --color-secondary-l2: #696A7C;
  --color-secondary-l3: #4D4E5B;

  /* Dark */
  --color-dark-d2: #FFFFFF;
  --color-dark-d1: #EAECF3;
  --color-dark: #D5D9E7;
  --color-dark-l1: #BEC4DA;
  --color-dark-l2: #A4ACCB;

  /* Light */
  --color-light-d2: #485265;
  --color-light-d1: #3B4554;
  --color-light: #2C333F;
  --color-light-l1: #242933;
  --color-white: #181C25;

  /* Success */
  --color-success-d2: #BAE8C6;
  --color-success-d1: #59C974;
  --color-success: #3BB959;
  --color-success-l1: #2A8340;
  --color-success-l2: #13391B;

  /* Info */
  --color-info-d2: #DCE4F5;
  --color-info-d1: #9EB7E6;
  --color-info: #7E9FDD;
  --color-info-l1: #4E7BD0;
  --color-info-l2: #142648;

  /* Warning */
  --color-warning-d2: #FFDFC7;
  --color-warning-d1: #FF9A4D;
  --color-warning: #FF7A14;
  --color-warning-l1: #D15B00;
  --color-warning-l2: #4D2100;

  /* Danger */
  --color-danger-d2: #FDE2E2;
  --color-danger-d1: #F69D9D;
  --color-danger: #F67474;
  --color-danger-l1: #EC2D2D;
  --color-danger-l2: #470606;

  /* Charts */
  --blue: #429AFF;
  --blue-d4: #E5F1FF;
  --blue-d3: #B8D8FF;
  --blue-d2: #94C4FF;
  --blue-d1: #70B1FF;
  --blue-l1: #2487FF;
  --blue-l2: #006BE6;
  --blue-l3: #0056B8;
  --blue-l4: #004799;
  --blue-l5: #002147;
  --orange: #FF6E14;
  --orange-d4: #FFE7D6;
  --orange-d3: #FFC099;
  --orange-d2: #FFA770;
  --orange-d1: #FF8A42;
  --orange-l1: #E55800;
  --orange-l2: #B84600;
  --orange-l3: #8F3700;
  --orange-l4: #6B2900;
  --orange-l5: #3D1700;
  --red: #FF6666;
  --red-d4: #FFE5E5;
  --red-d3: #FFCCCC;
  --red-d2: #FFB2B2;
  --red-d1: #FF8F8F;
  --red-l1: #FF2E2E;
  --red-l2: #F50000;
  --red-l3: #C70000;
  --red-l4: #8F0000;
  --red-l5: #420000;
  --teal: #28BDA4;
  --teal-d4: #DDF8F4;
  --teal-d3: #ABEDE2;
  --teal-d2: #7CE4D2;
  --teal-d1: #4AD9C0;
  --teal-l1: #22A08B;
  --teal-l2: #1B7E6E;
  --teal-l3: #156154;
  --teal-l4: #0E443B;
  --teal-l5: #0A2E29;
  --pink: #FF5CB8;
  --pink-d4: #FFF0F9;
  --pink-d3: #FFD6ED;
  --pink-d2: #FFB2DE;
  --pink-d1: #FF8ACC;
  --pink-l1: #FF33A7;
  --pink-l2: #FA008E;
  --pink-l3: #C2006D;
  --pink-l4: #85004B;
  --pink-l5: #570031;
  --green: #5CB21A;
  --green-d4: #DDF8C9;
  --green-d3: #BCF094;
  --green-d2: #9AE85F;
  --green-d1: #79E029;
  --green-l1: #4A8F14;
  --green-l2: #397010;
  --green-l3: #2C550C;
  --green-l4: #22430A;
  --green-l5: #162D06;
  --purple: #C87AFF;
  --purple-d4: #F5EBFF;
  --purple-d3: #ECD1FF;
  --purple-d2: #E1B8FF;
  --purple-d1: #D499FF;
  --purple-l1: #B54DFF;
  --purple-l2: #9F1AFF;
  --purple-l3: #8C00F0;
  --purple-l4: #6800B2;
  --purple-l5: #47007A;
  --yellow: #FFC524;
  --yellow-d4: #FFF8E5;
  --yellow-d3: #FFEAB2;
  --yellow-d2: #FFDC7A;
  --yellow-d1: #FFCC42;
  --yellow-l1: #D69C00;
  --yellow-l2: #B88600;
  --yellow-l3: #8A6500;
  --yellow-l4: #664E00;
  --yellow-l5: #473400;
  --cyan: #05ACFF;
  --cyan-d4: #D1EFFF;
  --cyan-d3: #99DDFF;
  --cyan-d2: #70CFFF;
  --cyan-d1: #38BDFF;
  --cyan-l1: #0095E0;
  --cyan-l2: #007EBD;
  --cyan-l3: #006699;
  --cyan-l4: #004E75;
  --cyan-l5: #00334D;
  --indigo: #8A95FF;
  --indigo-d4: #F0F1FF;
  --indigo-d3: #D1D6FF;
  --indigo-d2: #BDC3FF;
  --indigo-d1: #A8B1FF;
  --indigo-l1: #5C6DFF;
  --indigo-l2: #384CFF;
  --indigo-l3: #0019FA;
  --indigo-l4: #0013C2;
  --indigo-l5: #000A66;
}

/* ----------------------------------------------------------
   Dark High Contrast
   Activate: <html data-theme="dark-hc"> or <html class="dark-hc">
---------------------------------------------------------- */
.dark-hc, [data-theme="dark-hc"] {

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--color-dark, #1C1C24), 0 0 0 4px var(--color-primary-l0, #C7DAFF);

  /* Primary */
  --color-primary-d3: #F0F5FF;
  --color-primary-d2: #F0F5FF;
  --color-primary-d1: #C7DAFF;
  --color-primary: #B3CDFF;
  --color-primary-l0: #003EB2;
  --color-primary-l1: #00318F;
  --color-primary-l2: #002366;
  --color-primary-l3: #001A4D;

  /* Secondary */
  --color-secondary: #F6F6F8;
  --color-secondary-l0: #D9D9E3;
  --color-secondary-l1: #BCBDCC;
  --color-secondary-l2: #A5A7BB;
  --color-secondary-l3: #8B8DA7;

  /* Dark */
  --color-dark-d2: #FFFFFF;
  --color-dark-d1: #FFFFFF;
  --color-dark: #EAECF3;
  --color-dark-l1: #EAECF3;
  --color-dark-l2: #EAECF3;

  /* Light */
  --color-light-d2: #404B5D;
  --color-light-d1: #404B5D;
  --color-light: #1F2531;
  --color-light-l1: #070B13;
  --color-white: #070B13;

  /* Success */
  --color-success-d2: #D9F2DF;
  --color-success-d1: #A2E1B2;
  --color-success: #8CD99E;
  --color-success-l1: #26783A;
  --color-success-l2: #102E16;

  /* Info */
  --color-info-d2: #F3F6FC;
  --color-info-d1: #CAD8F1;
  --color-info: #B6C9EC;
  --color-info-l1: #254A8D;
  --color-info-l2: #0C172C;

  /* Warning */
  --color-warning-d2: #FFF4EC;
  --color-warning-d1: #FFCBA3;
  --color-warning: #FFB780;
  --color-warning-l1: #B24D00;
  --color-warning-l2: #331600;

  /* Danger */
  --color-danger-d2: #FEF1F1;
  --color-danger-d1: #FAC7C7;
  --color-danger: #F8B0B0;
  --color-danger-l1: #B61111;
  --color-danger-l2: #420606;

  /* Charts */
  --blue: #94C4FF;
  --blue-d4: #F0F7FF;
  --blue-d3: #D6E9FF;
  --blue-d2: #C2DDFF;
  --blue-d1: #A8CFFF;
  --blue-l1: #006CF0;
  --blue-l2: #005DC7;
  --blue-l3: #004594;
  --blue-l4: #002F66;
  --blue-l5: #002147;
  --orange: #FFB385;
  --orange-d4: #FFF6F0;
  --orange-d3: #FFE6D6;
  --orange-d2: #FFD6BD;
  --orange-d1: #FFC39E;
  --orange-l1: #EB5A00;
  --orange-l2: #C24A00;
  --orange-l3: #A33F00;
  --orange-l4: #803100;
  --orange-l5: #3D1700;
  --red: #FFADAD;
  --red-d4: #FFF5F5;
  --red-d3: #FFE0E0;
  --red-d2: #FFD6D6;
  --red-d1: #FFC7C7;
  --red-l1: #F50000;
  --red-l2: #C20000;
  --red-l3: #990000;
  --red-l4: #700000;
  --red-l5: #420000;
  --teal: #67DFCA;
  --teal-d4: #EAFBF8;
  --teal-d3: #CCF4ED;
  --teal-d2: #B3EFE5;
  --teal-d1: #96E9DB;
  --teal-l1: #28BEA4;
  --teal-l2: #1F9380;
  --teal-l3: #197667;
  --teal-l4: #12594E;
  --teal-l5: #0D3B34;
  --pink: #FFADDC;
  --pink-d4: #FFF5FB;
  --pink-d3: #FFE5F4;
  --pink-d2: #FFD6ED;
  --pink-d1: #FFC7E7;
  --pink-l1: #F5008B;
  --pink-l2: #C2006E;
  --pink-l3: #940053;
  --pink-l4: #610037;
  --pink-l5: #3D0022;
  --green: #79E029;
  --green-d4: #F1FCE9;
  --green-d3: #CFF4B3;
  --green-d2: #A6EA70;
  --green-d1: #92E651;
  --green-l1: #57AA18;
  --green-l2: #498F14;
  --green-l3: #3A6F10;
  --green-l4: #29500C;
  --green-l5: #162D06;
  --purple: #E1B8FF;
  --purple-d4: #F5EBFF;
  --purple-d3: #ECD1FF;
  --purple-d2: #ECD1FF;
  --purple-d1: #ECD1FF;
  --purple-l1: #9B0FFF;
  --purple-l2: #7F00DB;
  --purple-l3: #6E00BD;
  --purple-l4: #590099;
  --purple-l5: #3C0066;
  --yellow: #FFC524;
  --yellow-d4: #FFF8E5;
  --yellow-d3: #FFEAB2;
  --yellow-d2: #FFDC7A;
  --yellow-d1: #FFCC42;
  --yellow-l1: #D69C00;
  --yellow-l2: #B88600;
  --yellow-l3: #8A6500;
  --yellow-l4: #664E00;
  --yellow-l5: #473400;
  --cyan: #75D1FF;
  --cyan-d4: #E5F6FF;
  --cyan-d3: #C7ECFF;
  --cyan-d2: #ADE4FF;
  --cyan-d1: #94DBFF;
  --cyan-l1: #0095E0;
  --cyan-l2: #0073AD;
  --cyan-l3: #005F8F;
  --cyan-l4: #00476B;
  --cyan-l5: #00334D;
  --indigo: #BDC3FF;
  --indigo-d4: #F0F1FF;
  --indigo-d3: #D6DAFF;
  --indigo-d2: #D6DAFF;
  --indigo-d1: #D6DAFF;
  --indigo-l1: #051FFF;
  --indigo-l2: #0015D1;
  --indigo-l3: #0012B2;
  --indigo-l4: #000D85;
  --indigo-l5: #000A66;
}

/* Auto dark (OS preference) — only when no explicit theme class is set */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]):not(.light-hc):not([data-theme="light-hc"]):not(.dark):not([data-theme="dark"]):not(.dark-hc):not([data-theme="dark-hc"]) {

    /* Primary */
    --color-primary-d3: #D6E4FF;
    --color-primary-d2: #D6E4FF;
    --color-primary-d1: #7AA8FF;
    --color-primary: #6198FF;
    --color-primary-l0: #0F62FF;
    --color-primary-l1: #004CDB;
    --color-primary-l2: #003AA8;
    --color-primary-l3: #001A4D;

    /* Secondary */
    --color-secondary: #B3B3C6;
    --color-secondary-l0: #9A9CB2;
    --color-secondary-l1: #7D809C;
    --color-secondary-l2: #696A7C;
    --color-secondary-l3: #4D4E5B;

    /* Dark */
    --color-dark-d2: #FFFFFF;
    --color-dark-d1: #EAECF3;
    --color-dark: #D5D9E7;
    --color-dark-l1: #BEC4DA;
    --color-dark-l2: #A4ACCB;

    /* Light */
    --color-light-d2: #485265;
    --color-light-d1: #3B4554;
    --color-light: #2C333F;
    --color-light-l1: #242933;
    --color-white: #181C25;

    /* Success */
    --color-success-d2: #BAE8C6;
    --color-success-d1: #59C974;
    --color-success: #3BB959;
    --color-success-l1: #2A8340;
    --color-success-l2: #13391B;

    /* Info */
    --color-info-d2: #DCE4F5;
    --color-info-d1: #9EB7E6;
    --color-info: #7E9FDD;
    --color-info-l1: #4E7BD0;
    --color-info-l2: #142648;

    /* Warning */
    --color-warning-d2: #FFDFC7;
    --color-warning-d1: #FF9A4D;
    --color-warning: #FF7A14;
    --color-warning-l1: #D15B00;
    --color-warning-l2: #4D2100;

    /* Danger */
    --color-danger-d2: #FDE2E2;
    --color-danger-d1: #F69D9D;
    --color-danger: #F67474;
    --color-danger-l1: #EC2D2D;
    --color-danger-l2: #470606;

    /* Charts */
    --blue: #429AFF;
    --blue-d4: #E5F1FF;
    --blue-d3: #B8D8FF;
    --blue-d2: #94C4FF;
    --blue-d1: #70B1FF;
    --blue-l1: #2487FF;
    --blue-l2: #006BE6;
    --blue-l3: #0056B8;
    --blue-l4: #004799;
    --blue-l5: #002147;
    --orange: #FF6E14;
    --orange-d4: #FFE7D6;
    --orange-d3: #FFC099;
    --orange-d2: #FFA770;
    --orange-d1: #FF8A42;
    --orange-l1: #E55800;
    --orange-l2: #B84600;
    --orange-l3: #8F3700;
    --orange-l4: #6B2900;
    --orange-l5: #3D1700;
    --red: #FF6666;
    --red-d4: #FFE5E5;
    --red-d3: #FFCCCC;
    --red-d2: #FFB2B2;
    --red-d1: #FF8F8F;
    --red-l1: #FF2E2E;
    --red-l2: #F50000;
    --red-l3: #C70000;
    --red-l4: #8F0000;
    --red-l5: #420000;
    --teal: #28BDA4;
    --teal-d4: #DDF8F4;
    --teal-d3: #ABEDE2;
    --teal-d2: #7CE4D2;
    --teal-d1: #4AD9C0;
    --teal-l1: #22A08B;
    --teal-l2: #1B7E6E;
    --teal-l3: #156154;
    --teal-l4: #0E443B;
    --teal-l5: #0A2E29;
    --pink: #FF5CB8;
    --pink-d4: #FFF0F9;
    --pink-d3: #FFD6ED;
    --pink-d2: #FFB2DE;
    --pink-d1: #FF8ACC;
    --pink-l1: #FF33A7;
    --pink-l2: #FA008E;
    --pink-l3: #C2006D;
    --pink-l4: #85004B;
    --pink-l5: #570031;
    --green: #5CB21A;
    --green-d4: #DDF8C9;
    --green-d3: #BCF094;
    --green-d2: #9AE85F;
    --green-d1: #79E029;
    --green-l1: #4A8F14;
    --green-l2: #397010;
    --green-l3: #2C550C;
    --green-l4: #22430A;
    --green-l5: #162D06;
    --purple: #C87AFF;
    --purple-d4: #F5EBFF;
    --purple-d3: #ECD1FF;
    --purple-d2: #E1B8FF;
    --purple-d1: #D499FF;
    --purple-l1: #B54DFF;
    --purple-l2: #9F1AFF;
    --purple-l3: #8C00F0;
    --purple-l4: #6800B2;
    --purple-l5: #47007A;
    --yellow: #FFC524;
    --yellow-d4: #FFF8E5;
    --yellow-d3: #FFEAB2;
    --yellow-d2: #FFDC7A;
    --yellow-d1: #FFCC42;
    --yellow-l1: #D69C00;
    --yellow-l2: #B88600;
    --yellow-l3: #8A6500;
    --yellow-l4: #664E00;
    --yellow-l5: #473400;
    --cyan: #05ACFF;
    --cyan-d4: #D1EFFF;
    --cyan-d3: #99DDFF;
    --cyan-d2: #70CFFF;
    --cyan-d1: #38BDFF;
    --cyan-l1: #0095E0;
    --cyan-l2: #007EBD;
    --cyan-l3: #006699;
    --cyan-l4: #004E75;
    --cyan-l5: #00334D;
    --indigo: #8A95FF;
    --indigo-d4: #F0F1FF;
    --indigo-d3: #D1D6FF;
    --indigo-d2: #BDC3FF;
    --indigo-d1: #A8B1FF;
    --indigo-l1: #5C6DFF;
    --indigo-l2: #384CFF;
    --indigo-l3: #0019FA;
    --indigo-l4: #0013C2;
    --indigo-l5: #000A66;
  }
}

/* ── Skeleton shimmer — dark counterparts ──────────────────── */
.dark, [data-theme="dark"],
.dark-hc, [data-theme="dark-hc"] {
  --skeleton-shimmer-rgb: 99, 102, 130;   /* secondary-l1 (light scale) */
  --skeleton-shimmer-alpha: 0.35;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]):not(.light-hc):not([data-theme="light-hc"]):not(.dark):not([data-theme="dark"]):not(.dark-hc):not([data-theme="dark-hc"]) {
    --skeleton-shimmer-rgb: 99, 102, 130;
    --skeleton-shimmer-alpha: 0.35;
  }
}

/* ── Scrim — dark counterpart ───────────────────────────────
   The light scrim (#393A4A tint) reads too soft over dark surfaces, so dim
   with black instead. */
.dark, [data-theme="dark"],
.dark-hc, [data-theme="dark-hc"] {
  --color-scrim: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]):not(.light-hc):not([data-theme="light-hc"]):not(.dark):not([data-theme="dark"]):not(.dark-hc):not([data-theme="dark-hc"]) {
    --color-scrim: rgba(0, 0, 0, 0.6);
  }
}