body {
    --bg-2: #EBE8E2;
    --bg: #F4F2EE;
    --surface: #FFFFFF;
    --surface-2: #FAF9F6;
    --surface-3: #F0EEEA;
    --surface-4: #E8E5DF;
    --border: #E5E2DC;
    --border-strong: #D6D2CB;
    --text: #1A1815;
    --text-2: #5A554D;
    --text-3: #8A847B;
    --text-disabled: #B5AFA5;

    --button-bg: linear-gradient(0deg, var(--accent-text), var(--accent));
    --input-border: var(--accent);

    --accent: oklch(0.38 0.14 260);
    --accent-hover: oklch(0.90 0.06 260);
    --accent-soft: oklch(0.95 0.03 260);
    --accent-text: oklch(0.28 0.11 260);
    --accent-complement: oklch(0.55 0.14 80);
    /* extended accent scale */
    --accent-subtle: oklch(0.975 0.012 260);
    --accent-muted: oklch(0.75 0.07 260);
    --accent-border: oklch(0.70 0.09 260);
    --accent-strong: oklch(0.28 0.17 260);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.04 80);
    --accent-complement-text: oklch(0.38 0.13 80);


    /* SUCCESS (green) */
    --success: oklch(0.58 0.14 150);
    --success-strong: oklch(0.50 0.16 150);
    --success-soft: oklch(0.95 0.04 150);
    --success-text: oklch(0.34 0.10 150);

    /* WARNING (amber) */
    --warn: oklch(0.68 0.15 75);
    --warn-strong: oklch(0.58 0.17 75);
    --warn-soft: oklch(0.96 0.05 75);
    --warn-text: oklch(0.38 0.09 75);

    /* ERROR (red) */
    --error: oklch(0.60 0.18 25);
    --error-strong: oklch(0.52 0.20 25);
    --error-soft: oklch(0.95 0.05 25);
    --error-text: oklch(0.36 0.12 25);

    /* INFO (blue) */
    --info: oklch(0.58 0.13 235);
    --info-strong: oklch(0.50 0.15 235);
    --info-soft: oklch(0.95 0.04 235);
    --info-text: oklch(0.34 0.10 235);

    /* UNKNOWN (violet) */
    --unknown: oklch(0.60 0.14 290);
    --unknown-strong: oklch(0.52 0.16 290);
    --unknown-soft: oklch(0.95 0.04 290);
    --unknown-text: oklch(0.36 0.10 290);


    --radius: var(--rad-3);

    --shadow-sm: 0 1px 2px var(--opaque-100);
    --shadow-md: 0 1px 3px var(--opaque-100), 0 4px 12px var(--opaque-150);
    --shadow-lg: 0 24px 48px var(--opaque-200), 0 4px 12px var(--opaque-100);

    /* ROLES */
    --role-globaladmin-bg: oklch(0.93 0.05 145);
    --role-globaladmin-fg: oklch(0.38 0.10 145);
    --role-globaladmin-bd: oklch(0.82 0.08 145);

    --role-admin-bg: oklch(0.94 0.06 70);
    --role-admin-fg: oklch(0.45 0.12 60);
    --role-admin-bd: oklch(0.82 0.09 70);

    --role-user-bg: oklch(0.94 0.005 260);
    --role-user-fg: oklch(0.42 0.01 260);
    --role-user-bd: oklch(0.84 0.005 260);
}

html[data-theme="dark"] body {
    --bg-2: #070A0D;
    --bg: #0D1014;
    --surface: #15191F;
    --surface-2: #1A1F26;
    --surface-3: #232931;
    --surface-4: #2D343E;
    --border: #2A313B;
    --border-strong: #3A4250;
    --text: #ECEAE5;
    --text-2: #A8A49B;
    --text-3: #6E6A60;
    --text-disabled: #4A463F;

    --button-bg: linear-gradient(0deg, var(--accent), var(--accent-text));

    --accent: oklch(0.72 0.13 258);
    --accent-hover: oklch(0.30 0.09 258);
    --accent-soft: oklch(0.24 0.05 258);
    --accent-text: oklch(0.82 0.12 258);
    --accent-complement: oklch(0.73 0.14 80);
    /* extended accent scale */
    --accent-subtle: oklch(0.18 0.025 258);
    --accent-muted: oklch(0.48 0.08 258);
    --accent-border: oklch(0.38 0.08 258);
    --accent-strong: oklch(0.84 0.16 258);
    --accent-fg: oklch(0.12 0.04 258);
    --accent-complement-soft: oklch(0.28 0.05 80);
    --accent-complement-text: oklch(0.84 0.13 80);

    /* SUCCESS */
    --success: oklch(0.74 0.13 150);
    --success-strong: oklch(0.80 0.15 150);
    --success-soft: oklch(0.28 0.05 150);
    --success-text: oklch(0.84 0.10 150);

    /* WARNING */
    --warn: oklch(0.78 0.14 75);
    --warn-strong: oklch(0.84 0.16 75);
    --warn-soft: oklch(0.30 0.05 75);
    --warn-text: oklch(0.88 0.09 75);

    /* ERROR */
    --error: oklch(0.72 0.16 25);
    --error-strong: oklch(0.79 0.18 25);
    --error-soft: oklch(0.27 0.06 25);
    --error-text: oklch(0.84 0.12 25);

    /* INFO */
    --info: oklch(0.75 0.13 235);
    --info-strong: oklch(0.82 0.15 235);
    --info-soft: oklch(0.27 0.05 235);
    --info-text: oklch(0.86 0.10 235);

    /* UNKNOWN */
    --unknown: oklch(0.76 0.14 290);
    --unknown-strong: oklch(0.83 0.16 290);
    --unknown-soft: oklch(0.28 0.05 290);
    --unknown-text: oklch(0.87 0.10 290);

    --shadow-sm: 0 1px 0 var(--opaque-400), 0 1px 2px var(--opaque-400);
    --shadow-md: 0 4px 14px var(--opaque-400), 0 1px 3px var(--opaque-300);
    --shadow-lg: 0 24px 56px var(--opaque-600), 0 4px 12px var(--opaque-400);

    /* ROLES */
    --role-globaladmin-bg: oklch(0.30 0.06 145);
    --role-globaladmin-fg: oklch(0.82 0.10 145);
    --role-globaladmin-bd: oklch(0.40 0.08 145);

    --role-admin-bg: oklch(0.32 0.07 70);
    --role-admin-fg: oklch(0.85 0.11 75);
    --role-admin-bd: oklch(0.42 0.09 70);

    --role-user-bg: oklch(0.25 0.005 260);
    --role-user-fg: oklch(0.78 0.005 260);
    --role-user-bd: oklch(0.36 0.005 260);
}


/* Accent variants — driven by html[data-accent]. Default (no attribute) is blue. */

/* ---- TEAL ---- */
html[data-accent="teal"],
button[data-accent="teal"],
html[data-accent="teal"] body,
div[data-accent="teal"] body {
    --accent: oklch(0.56 0.11 195);
    --accent-hover: oklch(0.90 0.05 195);
    --accent-soft: oklch(0.95 0.03 195);
    --accent-text: oklch(0.40 0.11 195);
    --accent-complement: oklch(0.55 0.15 15);
    --accent-subtle: oklch(0.975 0.012 195);
    --accent-muted: oklch(0.75 0.06 195);
    --accent-border: oklch(0.70 0.08 195);
    --accent-strong: oklch(0.42 0.14 195);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.04 15);
    --accent-complement-text: oklch(0.40 0.14 15);
}

html[data-accent="teal"][data-theme="dark"],
html[data-theme="dark"] button[data-accent="teal"],
html[data-accent="teal"][data-theme="dark"] body,
html[data-theme="dark"] button[data-accent="teal"] body {
    --accent: oklch(0.74 0.11 195);
    --accent-hover: oklch(0.30 0.08 195);
    --accent-soft: oklch(0.24 0.04 195);
    --accent-text: oklch(0.83 0.10 195);
    --accent-complement: oklch(0.73 0.14 15);
    --accent-subtle: oklch(0.18 0.02 195);
    --accent-muted: oklch(0.48 0.07 195);
    --accent-border: oklch(0.38 0.07 195);
    --accent-strong: oklch(0.86 0.14 195);
    --accent-fg: oklch(0.12 0.03 195);
    --accent-complement-soft: oklch(0.28 0.05 15);
    --accent-complement-text: oklch(0.85 0.14 15);
}

/* ---- ROSE ---- */
html[data-accent="rose"],
button[data-accent="rose"],
html[data-accent="rose"] body,
div[data-accent="rose"] body {
    --accent: oklch(0.57 0.16 25);
    --accent-hover: oklch(0.91 0.06 25);
    --accent-soft: oklch(0.95 0.03 25);
    --accent-text: oklch(0.48 0.15 25);
    --accent-complement: oklch(0.55 0.11 205);
    --accent-subtle: oklch(0.975 0.013 25);
    --accent-muted: oklch(0.75 0.08 25);
    --accent-border: oklch(0.70 0.10 25);
    --accent-strong: oklch(0.43 0.20 25);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.03 205);
    --accent-complement-text: oklch(0.38 0.10 205);
}

html[data-accent="rose"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="rose"],
html[data-accent="rose"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="rose"] body {
    --accent: oklch(0.72 0.15 25);
    --accent-hover: oklch(0.30 0.10 25);
    --accent-soft: oklch(0.24 0.05 25);
    --accent-text: oklch(0.83 0.13 25);
    --accent-complement: oklch(0.73 0.11 205);
    --accent-subtle: oklch(0.18 0.03 25);
    --accent-muted: oklch(0.48 0.09 25);
    --accent-border: oklch(0.38 0.09 25);
    --accent-strong: oklch(0.84 0.18 25);
    --accent-fg: oklch(0.12 0.03 25);
    --accent-complement-soft: oklch(0.28 0.04 205);
    --accent-complement-text: oklch(0.84 0.10 205);
}

/* ---- BLUE ---- */
html[data-accent="blue"],
button[data-accent="blue"],
html[data-accent="blue"] body,
div[data-accent="blue"] body {
    --accent: oklch(0.38 0.14 260);
    --accent-hover: oklch(0.90 0.06 260);
    --accent-soft: oklch(0.95 0.03 260);
    --accent-text: oklch(0.28 0.11 260);
    --accent-complement: oklch(0.55 0.14 80);
    --accent-subtle: oklch(0.975 0.012 260);
    --accent-muted: oklch(0.75 0.07 260);
    --accent-border: oklch(0.70 0.09 260);
    --accent-strong: oklch(0.28 0.17 260);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.04 80);
    --accent-complement-text: oklch(0.38 0.13 80);
}

html[data-accent="blue"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="blue"],
html[data-accent="blue"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="blue"] body {
    --accent: oklch(0.72 0.13 258);
    --accent-hover: oklch(0.30 0.09 258);
    --accent-soft: oklch(0.24 0.05 258);
    --accent-text: oklch(0.82 0.12 258);
    --accent-complement: oklch(0.73 0.14 80);
    --accent-subtle: oklch(0.18 0.025 258);
    --accent-muted: oklch(0.48 0.08 258);
    --accent-border: oklch(0.38 0.08 258);
    --accent-strong: oklch(0.84 0.16 258);
    --accent-fg: oklch(0.12 0.04 258);
    --accent-complement-soft: oklch(0.28 0.05 80);
    --accent-complement-text: oklch(0.84 0.13 80);
}

/* ---- GREEN ---- */
html[data-accent="green"],
button[data-accent="green"],
html[data-accent="green"] body,
div[data-accent="green"] body {
    --accent: oklch(0.55 0.13 150);
    --accent-soft: oklch(0.95 0.03 150);
    --accent-text: oklch(0.40 0.13 150);
    --accent-hover: oklch(0.92 0.05 150);
    --accent-complement: oklch(0.55 0.14 330);
    --accent-subtle: oklch(0.975 0.012 150);
    --accent-muted: oklch(0.75 0.07 150);
    --accent-border: oklch(0.70 0.09 150);
    --accent-strong: oklch(0.41 0.16 150);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.04 330);
    --accent-complement-text: oklch(0.40 0.13 330);
}

html[data-accent="green"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="green"],
html[data-accent="green"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="green"] body {
    --accent: oklch(0.72 0.13 150);
    --accent-soft: oklch(0.24 0.04 150);
    --accent-text: oklch(0.82 0.12 150);
    --accent-hover: oklch(0.30 0.09 150);
    --accent-complement: oklch(0.73 0.14 330);
    --accent-subtle: oklch(0.18 0.025 150);
    --accent-muted: oklch(0.48 0.08 150);
    --accent-border: oklch(0.38 0.07 150);
    --accent-strong: oklch(0.84 0.16 150);
    --accent-fg: oklch(0.12 0.03 150);
    --accent-complement-soft: oklch(0.28 0.05 330);
    --accent-complement-text: oklch(0.84 0.12 330);
}

/* ---- PLUM ---- */
html[data-accent="plum"],
button[data-accent="plum"],
html[data-accent="plum"] body,
div[data-accent="plum"] body {
    --accent: oklch(0.55 0.14 320);
    --accent-soft: oklch(0.95 0.03 320);
    --accent-text: oklch(0.40 0.14 320);
    --accent-hover: oklch(0.91 0.05 320);
    --accent-complement: oklch(0.55 0.13 140);
    --accent-subtle: oklch(0.975 0.012 320);
    --accent-muted: oklch(0.75 0.07 320);
    --accent-border: oklch(0.70 0.09 320);
    --accent-strong: oklch(0.41 0.18 320);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.03 140);
    --accent-complement-text: oklch(0.40 0.12 140);
}

html[data-accent="plum"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="plum"],
html[data-accent="plum"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="plum"] body {
    --accent: oklch(0.72 0.14 320);
    --accent-soft: oklch(0.24 0.05 320);
    --accent-text: oklch(0.82 0.12 320);
    --accent-hover: oklch(0.30 0.09 320);
    --accent-complement: oklch(0.73 0.13 140);
    --accent-subtle: oklch(0.18 0.025 320);
    --accent-muted: oklch(0.48 0.08 320);
    --accent-border: oklch(0.38 0.08 320);
    --accent-strong: oklch(0.84 0.17 320);
    --accent-fg: oklch(0.12 0.03 320);
    --accent-complement-soft: oklch(0.28 0.05 140);
    --accent-complement-text: oklch(0.84 0.11 140);
}

/* ---- AMBER ---- */
/* Note: amber's accent sits at L≈0.68–0.78, so --accent-fg uses dark text
   for adequate contrast on the amber background in both modes. */
html[data-accent="amber"],
button[data-accent="amber"],
html[data-accent="amber"] body,
div[data-accent="amber"] body {
    --accent: oklch(0.68 0.15 70);
    --accent-soft: oklch(0.95 0.04 70);
    --accent-text: oklch(0.45 0.13 70);
    --accent-hover: oklch(0.91 0.08 70);
    --accent-complement: oklch(0.55 0.13 250);
    --accent-subtle: oklch(0.975 0.015 70);
    --accent-muted: oklch(0.80 0.08 70);
    --accent-border: oklch(0.74 0.11 70);
    --accent-strong: oklch(0.52 0.18 70);
    --accent-fg: oklch(0.20 0.06 70);
    --accent-complement-soft: oklch(0.95 0.03 250);
    --accent-complement-text: oklch(0.36 0.10 250);
}

html[data-accent="amber"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="amber"],
html[data-accent="amber"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="amber"] body {
    --accent: oklch(0.78 0.14 70);
    --accent-soft: oklch(0.40 0.09 70);
    --accent-text: oklch(0.85 0.13 70);
    --accent-hover: oklch(0.30 0.09 70);
    --accent-complement: oklch(0.73 0.13 250);
    --accent-subtle: oklch(0.22 0.03 70);
    --accent-muted: oklch(0.52 0.09 70);
    --accent-border: oklch(0.42 0.09 70);
    --accent-strong: oklch(0.88 0.16 70);
    --accent-fg: oklch(0.14 0.04 70);
    --accent-complement-soft: oklch(0.26 0.04 250);
    --accent-complement-text: oklch(0.84 0.11 250);
}


/* ---- INDIGO ---- */
/* Deeper blue-purple (~275°). Pairs with Amber (~70°) — same complement axis
   as Blue+Amber but warmer and moodier. Good candidate to replace Blue. */
html[data-accent="indigo"],
button[data-accent="indigo"],
html[data-accent="indigo"] body,
div[data-accent="indigo"] body {
    --accent: oklch(0.42 0.16 275);
    --accent-hover: oklch(0.90 0.06 275);
    --accent-soft: oklch(0.95 0.03 275);
    --accent-text: oklch(0.30 0.13 275);
    --accent-complement: oklch(0.55 0.14 80);
    --accent-subtle: oklch(0.975 0.012 275);
    --accent-muted: oklch(0.75 0.07 275);
    --accent-border: oklch(0.70 0.09 275);
    --accent-strong: oklch(0.30 0.18 275);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.04 80);
    --accent-complement-text: oklch(0.38 0.13 80);
}

html[data-accent="indigo"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="indigo"],
html[data-accent="indigo"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="indigo"] body {
    --accent: oklch(0.74 0.14 275);
    --accent-hover: oklch(0.30 0.09 275);
    --accent-soft: oklch(0.24 0.05 275);
    --accent-text: oklch(0.84 0.12 275);
    --accent-complement: oklch(0.73 0.14 80);
    --accent-subtle: oklch(0.18 0.025 275);
    --accent-muted: oklch(0.48 0.08 275);
    --accent-border: oklch(0.38 0.08 275);
    --accent-strong: oklch(0.86 0.16 275);
    --accent-fg: oklch(0.12 0.04 275);
    --accent-complement-soft: oklch(0.28 0.05 80);
    --accent-complement-text: oklch(0.84 0.13 80);
}

/* ---- CRIMSON ---- */
/* True deep red (~10°). Pairs with Teal (~195°) — exact complement.
   More dramatic than Rose; good candidate to replace Rose. */
html[data-accent="crimson"],
button[data-accent="crimson"],
html[data-accent="crimson"] body,
div[data-accent="crimson"] body {
    --accent: oklch(0.52 0.22 10);
    --accent-hover: oklch(0.91 0.06 10);
    --accent-soft: oklch(0.95 0.04 10);
    --accent-text: oklch(0.40 0.18 10);
    --accent-complement: oklch(0.55 0.11 195);
    --accent-subtle: oklch(0.975 0.013 10);
    --accent-muted: oklch(0.74 0.09 10);
    --accent-border: oklch(0.70 0.11 10);
    --accent-strong: oklch(0.38 0.25 10);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.03 195);
    --accent-complement-text: oklch(0.40 0.11 195);
}

html[data-accent="crimson"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="crimson"],
html[data-accent="crimson"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="crimson"] body {
    --accent: oklch(0.70 0.20 10);
    --accent-hover: oklch(0.28 0.10 10);
    --accent-soft: oklch(0.24 0.06 10);
    --accent-text: oklch(0.82 0.16 10);
    --accent-complement: oklch(0.73 0.11 195);
    --accent-subtle: oklch(0.18 0.03 10);
    --accent-muted: oklch(0.47 0.10 10);
    --accent-border: oklch(0.37 0.10 10);
    --accent-strong: oklch(0.82 0.22 10);
    --accent-fg: oklch(0.12 0.04 10);
    --accent-complement-soft: oklch(0.28 0.04 195);
    --accent-complement-text: oklch(0.83 0.10 195);
}

/* ---- VIOLET ---- */
/* Pure purple (~300°), between Plum and Blue. Pairs with Lime (~120°).
   Plum is pink-purple; Violet is cooler and more saturated. */
html[data-accent="violet"],
button[data-accent="violet"],
html[data-accent="violet"] body,
div[data-accent="violet"] body {
    --accent: oklch(0.50 0.16 300);
    --accent-hover: oklch(0.91 0.05 300);
    --accent-soft: oklch(0.95 0.03 300);
    --accent-text: oklch(0.36 0.14 300);
    --accent-complement: oklch(0.55 0.14 120);
    --accent-subtle: oklch(0.975 0.012 300);
    --accent-muted: oklch(0.75 0.07 300);
    --accent-border: oklch(0.70 0.09 300);
    --accent-strong: oklch(0.36 0.19 300);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.04 120);
    --accent-complement-text: oklch(0.38 0.13 120);
}

html[data-accent="violet"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="violet"],
html[data-accent="violet"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="violet"] body {
    --accent: oklch(0.72 0.15 300);
    --accent-hover: oklch(0.30 0.09 300);
    --accent-soft: oklch(0.24 0.05 300);
    --accent-text: oklch(0.83 0.13 300);
    --accent-complement: oklch(0.73 0.14 120);
    --accent-subtle: oklch(0.18 0.025 300);
    --accent-muted: oklch(0.48 0.08 300);
    --accent-border: oklch(0.38 0.08 300);
    --accent-strong: oklch(0.84 0.18 300);
    --accent-fg: oklch(0.12 0.03 300);
    --accent-complement-soft: oklch(0.28 0.05 120);
    --accent-complement-text: oklch(0.84 0.13 120);
}

/* ---- CORAL ---- */
/* Warm orange-coral (~45°). Pairs with Slate (~225°).
   Note: --accent-fg is dark — coral at L≈0.62 needs dark text for contrast. */
html[data-accent="coral"],
button[data-accent="coral"],
html[data-accent="coral"] body,
div[data-accent="coral"] body {
    --accent: oklch(0.62 0.18 45);
    --accent-hover: oklch(0.91 0.08 45);
    --accent-soft: oklch(0.95 0.04 45);
    --accent-text: oklch(0.44 0.16 45);
    --accent-complement: oklch(0.55 0.12 225);
    --accent-subtle: oklch(0.975 0.015 45);
    --accent-muted: oklch(0.78 0.09 45);
    --accent-border: oklch(0.73 0.12 45);
    --accent-strong: oklch(0.48 0.21 45);
    --accent-fg: oklch(0.18 0.05 45);
    --accent-complement-soft: oklch(0.95 0.03 225);
    --accent-complement-text: oklch(0.38 0.10 225);
}

html[data-accent="coral"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="coral"],
html[data-accent="coral"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="coral"] body {
    --accent: oklch(0.76 0.17 45);
    --accent-hover: oklch(0.30 0.10 45);
    --accent-soft: oklch(0.28 0.07 45);
    --accent-text: oklch(0.86 0.14 45);
    --accent-complement: oklch(0.73 0.12 225);
    --accent-subtle: oklch(0.20 0.04 45);
    --accent-muted: oklch(0.52 0.10 45);
    --accent-border: oklch(0.42 0.10 45);
    --accent-strong: oklch(0.87 0.18 45);
    --accent-fg: oklch(0.14 0.04 45);
    --accent-complement-soft: oklch(0.27 0.04 225);
    --accent-complement-text: oklch(0.84 0.11 225);
}

/* ---- SAGE ---- */
/* Muted earthy green (~115°). Low chroma gives it a calm, natural feel.
   Pairs with Rose (~25°). Good candidate to replace Green. */
html[data-accent="sage"],
button[data-accent="sage"],
html[data-accent="sage"] body,
div[data-accent="sage"] body {
    --accent: oklch(0.52 0.10 115);
    --accent-hover: oklch(0.91 0.04 115);
    --accent-soft: oklch(0.95 0.025 115);
    --accent-text: oklch(0.38 0.08 115);
    --accent-complement: oklch(0.55 0.14 25);
    --accent-subtle: oklch(0.975 0.010 115);
    --accent-muted: oklch(0.75 0.05 115);
    --accent-border: oklch(0.70 0.07 115);
    --accent-strong: oklch(0.39 0.12 115);
    --accent-fg: #ffffff;
    --accent-complement-soft: oklch(0.95 0.03 25);
    --accent-complement-text: oklch(0.40 0.14 25);
}

html[data-accent="sage"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="sage"],
html[data-accent="sage"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="sage"] body {
    --accent: oklch(0.72 0.10 115);
    --accent-hover: oklch(0.30 0.07 115);
    --accent-soft: oklch(0.24 0.04 115);
    --accent-text: oklch(0.82 0.09 115);
    --accent-complement: oklch(0.73 0.14 25);
    --accent-subtle: oklch(0.18 0.02 115);
    --accent-muted: oklch(0.48 0.06 115);
    --accent-border: oklch(0.38 0.06 115);
    --accent-strong: oklch(0.84 0.12 115);
    --accent-fg: oklch(0.12 0.03 115);
    --accent-complement-soft: oklch(0.28 0.05 25);
    --accent-complement-text: oklch(0.84 0.12 25);
}


/* --------------------
    Theming Panel
-------------------- */