/* Combat Clarity design tokens — light + dark ("Light arcane" / "Night arcane").
   Theme switch: <html data-theme="light|dark" data-bs-theme="light|dark">.
   Without JS / without data-theme the OS preference applies. All text pairs >= 4.5:1. */

:root, :root[data-theme="light"] {
  color-scheme: light;
  --cc-bg: #F7F7FB;
  --cc-surface: #FFFFFF;
  --cc-surface-2: #F2F1F7;
  --cc-border: #E4E4EE;
  --cc-border-strong: #CFCDE0;
  --cc-text: #1E1B2E;
  --cc-text-muted: #6B6880;
  --cc-text-subtle: #475467;
  --cc-accent: #6D28D9;
  --cc-accent-hover: #5B21B6;
  --cc-accent-strong: #5B21B6;   /* accent text on accent-soft */
  --cc-accent-soft: #EDE9FE;
  --cc-on-accent: #FFFFFF;
  --cc-btn-a: #7C3AED; --cc-btn-b: #5B21B6;

  --cc-better: #0E7490;  --cc-better-text: #0B6378;  --cc-better-soft: #E0F2F7;
  --cc-worse:  #D9622B;  --cc-worse-text:  #A3461B;  --cc-worse-soft:  #FDEDE4;
  --cc-ref:    #A9A6BD;

  --cc-high: #B42318;    --cc-high-soft: #FDECEA;
  --cc-medium: #B7791F;  --cc-medium-text: #8A5A0B; --cc-medium-soft: #FCF3DC;
  --cc-low: #6B6880;
  --cc-ok: #0E7490;

  --cc-chart-1: #6D28D9; --cc-chart-2: #0E7490; --cc-chart-3: #D9622B;
  --cc-chart-4: #B7791F; --cc-chart-5: #A9A6BD;

  --cc-shadow-1: 0 1px 2px rgba(30,27,46,.06);
  --cc-shadow-2: 0 8px 24px rgba(30,27,46,.10);
  --cc-radius-sm: 6px; --cc-radius: 10px; --cc-radius-pill: 999px;

  /* class colours: dots/borders only, never text */
  --class-deathknight:#C41E3A; --class-demonhunter:#A330C9; --class-druid:#FF7C0A; --class-evoker:#33937F;
  --class-hunter:#AAD372; --class-mage:#3FC7EB; --class-monk:#00FF98; --class-paladin:#F48CBA;
  --class-priest:#E8E6F0; --class-rogue:#FFF468; --class-shaman:#0070DD; --class-warlock:#8788EE; --class-warrior:#C69B6D;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cc-bg: #13111C;
  --cc-surface: #1C1A28;
  --cc-surface-2: #252336;
  --cc-border: #2F2C42;
  --cc-border-strong: #3E3A57;
  --cc-text: #ECEAF5;
  --cc-text-muted: #A3A0B8;
  --cc-text-subtle: #BAB7CC;
  --cc-accent: #A78BFA;
  --cc-accent-hover: #C4B5FD;
  --cc-accent-strong: #C4B5FD;
  --cc-accent-soft: #2E2350;
  --cc-on-accent: #13111C;
  --cc-btn-a: #C4B5FD; --cc-btn-b: #A78BFA;

  --cc-better: #22B8CF;  --cc-better-text: #67D4E6;  --cc-better-soft: #0E3440;
  --cc-worse:  #F0834F;  --cc-worse-text:  #F6A27A;  --cc-worse-soft:  #3D2216;
  --cc-ref:    #6E6A8A;

  --cc-high: #F87171;    --cc-high-soft: #3B1A1D;
  --cc-medium: #E0A43A;  --cc-medium-text: #EBC06B; --cc-medium-soft: #362A12;
  --cc-low: #A3A0B8;
  --cc-ok: #22B8CF;

  --cc-chart-1: #A78BFA; --cc-chart-2: #22B8CF; --cc-chart-3: #F0834F;
  --cc-chart-4: #E0A43A; --cc-chart-5: #6E6A8A;

  --cc-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --cc-shadow-2: 0 8px 24px rgba(0,0,0,.5);
  --class-priest: #FFFFFF;
}

/* No-JS fallback: follow the OS when no theme was chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --cc-bg:#13111C; --cc-surface:#1C1A28; --cc-surface-2:#252336; --cc-border:#2F2C42; --cc-border-strong:#3E3A57;
    --cc-text:#ECEAF5; --cc-text-muted:#A3A0B8; --cc-text-subtle:#BAB7CC;
    --cc-accent:#A78BFA; --cc-accent-hover:#C4B5FD; --cc-accent-strong:#C4B5FD; --cc-accent-soft:#2E2350; --cc-on-accent:#13111C;
    --cc-btn-a:#C4B5FD; --cc-btn-b:#A78BFA;
    --cc-better:#22B8CF; --cc-better-text:#67D4E6; --cc-better-soft:#0E3440;
    --cc-worse:#F0834F; --cc-worse-text:#F6A27A; --cc-worse-soft:#3D2216; --cc-ref:#6E6A8A;
    --cc-high:#F87171; --cc-high-soft:#3B1A1D; --cc-medium:#E0A43A; --cc-medium-text:#EBC06B; --cc-medium-soft:#362A12;
    --cc-low:#A3A0B8; --cc-ok:#22B8CF;
    --cc-chart-1:#A78BFA; --cc-chart-2:#22B8CF; --cc-chart-3:#F0834F; --cc-chart-4:#E0A43A; --cc-chart-5:#6E6A8A;
    --cc-shadow-1:0 1px 2px rgba(0,0,0,.4); --cc-shadow-2:0 8px 24px rgba(0,0,0,.5); --class-priest:#FFFFFF;
  }
}


/* Bootstrap 5.3 mapping (Bootstrap also flips its own components via data-bs-theme) */
:root, [data-bs-theme] {
  --bs-body-bg: var(--cc-bg);
  --bs-body-color: var(--cc-text);
  --bs-emphasis-color: var(--cc-text);
  --bs-secondary-color: var(--cc-text-muted);
  --bs-secondary-bg: var(--cc-surface-2);
  --bs-tertiary-bg: var(--cc-surface-2);
  --bs-border-color: var(--cc-border);
  --bs-link-color: var(--cc-accent);
  --bs-link-color-rgb: 109,40,217;
  --bs-link-hover-color: var(--cc-accent-hover);
  --bs-border-radius: var(--cc-radius);
}
:root[data-theme="dark"] { --bs-link-color-rgb: 167,139,250; }
.card { --bs-card-bg: var(--cc-surface); --bs-card-border-color: var(--cc-border); }
.table { --bs-table-bg: var(--cc-surface); --bs-table-color: var(--cc-text); --bs-table-striped-bg: var(--cc-surface-2); --bs-table-border-color: var(--cc-border); }

/* ---- Additions for the app (same token rules: every colour lives here, light + dark) ---- */
:root {
  --cc-fs-display: 1.75rem;   /* 28 / 34, page title */
  --cc-fs-h2: 1.25rem;        /* 20 / 28, section titles */
  --cc-fs-h3: 1rem;           /* 16 / 24, card titles */
  --cc-fs-body: .9375rem;     /* 15 / 24 */
  --cc-fs-table: .875rem;     /* 14 / 20 */
  --cc-fs-small: .78125rem;   /* 12.5 / 16, captions, column headers */
  --cc-fs-stat: 1.625rem;     /* 26 / 30, stat tiles */
  --cc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-page-max: 1440px;
  --cc-card-pad: 20px;
  --cc-cell-y: 10px; --cc-cell-x: 12px; --cc-cell-sm-y: 6px; --cc-cell-sm-x: 10px;
  --cc-fs-cell: var(--cc-fs-table);
}
:root[data-density="compact"] {
  --cc-card-pad: 12px;
  --cc-cell-y: 4px; --cc-cell-x: 8px; --cc-cell-sm-y: 3px; --cc-cell-sm-x: 6px;
  --cc-fs-cell: .8125rem;
}

/* severity text = fill except medium; soft backgrounds for low / ok reuse existing tokens */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --cc-high-text: var(--cc-high);
  --cc-low-text: var(--cc-text-subtle);
  --cc-low-soft: var(--cc-surface-2);
  --cc-ok-text: var(--cc-better-text);
  --cc-ok-soft: var(--cc-better-soft);
}

/* Talent trees: wowhead-like dark panels in both themes (status colours follow the comparison pair) */
:root, :root[data-theme="light"] {
  --cc-tree-bg: #1C1A28; --cc-tree-border: #2F2C42; --cc-tree-node: #252336; --cc-tree-node-border: #3E3A57;
  --cc-tree-text: #ECEAF5; --cc-tree-muted: #A3A0B8; --cc-tree-badge: #13111C;
  --cc-tree-you: #67D4E6; --cc-tree-both: #22B8CF; --cc-tree-rare: #F0834F; --cc-tree-missing: #E0A43A; --cc-tree-top: #6E6A8A;
}
:root[data-theme="dark"] { --cc-tree-bg: #13111C; }

/* ---- Bootstrap 5.3 mapping, extended ---- */
:root, [data-bs-theme] {
  --bs-body-font-family: var(--cc-font);
  --bs-body-font-size: var(--cc-fs-body);
  --bs-body-line-height: 1.6;
  --bs-primary: #6D28D9; --bs-primary-rgb: 109,40,217;
  --bs-primary-text-emphasis: var(--cc-accent-strong);
  --bs-primary-bg-subtle: var(--cc-accent-soft);
  --bs-primary-border-subtle: var(--cc-accent-soft);
  --bs-success-text-emphasis: var(--cc-better-text);
  --bs-success-bg-subtle: var(--cc-better-soft);
  --bs-success-border-subtle: var(--cc-better-soft);
  --bs-danger-text-emphasis: var(--cc-high-text);
  --bs-danger-bg-subtle: var(--cc-high-soft);
  --bs-danger-border-subtle: var(--cc-high-soft);
  --bs-warning-text-emphasis: var(--cc-medium-text);
  --bs-warning-bg-subtle: var(--cc-medium-soft);
  --bs-warning-border-subtle: var(--cc-medium-soft);
  --bs-info-text-emphasis: var(--cc-accent-strong);
  --bs-info-bg-subtle: var(--cc-accent-soft);
  --bs-info-border-subtle: var(--cc-accent-soft);
  --bs-secondary-text-emphasis: var(--cc-text-subtle);
  --bs-secondary-bg-subtle: var(--cc-surface-2);
  --bs-secondary-border-subtle: var(--cc-border);
  --bs-light-bg-subtle: var(--cc-surface-2);
  --bs-border-radius-sm: var(--cc-radius-sm);
  --bs-border-radius-lg: var(--cc-radius);
  --bs-border-color-translucent: var(--cc-border);
  --bs-focus-ring-color: color-mix(in srgb, var(--cc-accent) 35%, transparent);
  --bs-code-color: var(--cc-accent-strong);
  --bs-highlight-bg: var(--cc-medium-soft);
  --bs-form-valid-color: var(--cc-better-text);
  --bs-form-valid-border-color: var(--cc-better);
  --bs-form-invalid-color: var(--cc-high-text);
  --bs-form-invalid-border-color: var(--cc-high);
}
:root[data-theme="dark"] { --bs-primary: #A78BFA; --bs-primary-rgb: 167,139,250; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --bs-primary: #A78BFA; --bs-primary-rgb: 167,139,250; --bs-link-color-rgb: 167,139,250; }
}
.card { --bs-card-spacer-y: var(--cc-card-pad); --bs-card-spacer-x: var(--cc-card-pad); --bs-card-cap-padding-x: var(--cc-card-pad);
        --bs-card-cap-bg: var(--cc-surface); --bs-card-border-radius: var(--cc-radius); --bs-card-inner-border-radius: calc(var(--cc-radius) - 1px); }
.table { --bs-table-hover-bg: var(--cc-surface-2); --bs-table-hover-color: var(--cc-text); --bs-table-active-bg: var(--cc-accent-soft);
         --bs-table-striped-color: var(--cc-text); }
.list-group { --bs-list-group-bg: var(--cc-surface); --bs-list-group-color: var(--cc-text); --bs-list-group-border-color: var(--cc-border);
              --bs-list-group-action-hover-bg: var(--cc-surface-2); --bs-list-group-action-hover-color: var(--cc-text);
              --bs-list-group-active-bg: var(--cc-accent-soft); --bs-list-group-active-color: var(--cc-accent-strong);
              --bs-list-group-active-border-color: var(--cc-accent-soft); }
.dropdown-menu { --bs-dropdown-bg: var(--cc-surface); --bs-dropdown-color: var(--cc-text); --bs-dropdown-border-color: var(--cc-border);
                 --bs-dropdown-link-color: var(--cc-text); --bs-dropdown-link-hover-bg: var(--cc-surface-2);
                 --bs-dropdown-link-active-bg: var(--cc-accent-soft); --bs-dropdown-link-active-color: var(--cc-accent-strong);
                 --bs-dropdown-box-shadow: var(--cc-shadow-2); }
.popover { --bs-popover-bg: var(--cc-surface); --bs-popover-border-color: var(--cc-border); --bs-popover-header-bg: var(--cc-surface-2);
           --bs-popover-body-color: var(--cc-text); --bs-popover-box-shadow: var(--cc-shadow-2); }
.tooltip { --bs-tooltip-bg: var(--cc-text); --bs-tooltip-color: var(--cc-surface); }
.modal { --bs-modal-bg: var(--cc-surface); --bs-modal-border-color: var(--cc-border); }
.nav-tabs { --bs-nav-tabs-border-color: var(--cc-border); --bs-nav-tabs-link-active-bg: transparent;
            --bs-nav-tabs-link-active-color: var(--cc-accent-strong); --bs-nav-tabs-link-active-border-color: transparent; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--cc-accent-soft); --bs-nav-pills-link-active-color: var(--cc-accent-strong); }
.pagination { --bs-pagination-active-bg: var(--cc-accent); --bs-pagination-active-border-color: var(--cc-accent); }
.form-control, .form-select, .input-group-text { background-color: var(--cc-surface); border-color: var(--cc-border-strong); color: var(--cc-text); }
.form-control:focus, .form-select:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--cc-accent); border-color: var(--cc-accent); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: none; }
.progress { --bs-progress-bg: var(--cc-surface-2); --bs-progress-bar-bg: var(--cc-accent); }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }