/* ==========================================================================
   newtmail-tokens.css
   ==========================================================================
   NewtMail colour tokens on top of the PEGMENT design system.

   PEGMENT's components read semantic tokens (--color-bg-canvas,
   --btn-primary-bg, ...). NewtMail keeps every token name and only swaps the
   values, so this file must load AFTER css/style.css.

   Source: NewtMail-Colour-Tokens.xlsx ("Primitives" + "Semantic Tokens").
   Light values live on :root, dark values follow PEGMENT's two dark-mode
   hooks: prefers-color-scheme and the manual .dark class.
   ========================================================================== */

:root {
  /* ========================================================================
     NEWTMAIL PRIMITIVES
     ======================================================================== */
  /* Pond Teal */
  --color-pond-teal-50: #E8FAF4;
  --color-pond-teal-100: #CBF8EB;
  --color-pond-teal-200: #B2E8D9;
  --color-pond-teal-300: #93D4C2;
  --color-pond-teal-400: #3CCFAE;
  --color-pond-teal-500: #33A88F;
  --color-pond-teal-600: #0F8A74;
  --color-pond-teal-700: #0B7A66;
  --color-pond-teal-800: #145649;
  --color-pond-teal-900: #0C3F34;
  --color-pond-teal-950: #052821;

  /* Violet (logo) */
  --color-spark-violet-50: #F6F6FF;
  --color-spark-violet-100: #EAEBFE;
  --color-spark-violet-200: #D7D8FC;
  --color-spark-violet-300: #BDBCFF;
  --color-spark-violet-400: #9D8AF7;
  --color-spark-violet-500: #8980F7;
  --color-spark-violet-600: #6A48F0;
  --color-spark-violet-700: #5A46C4;
  --color-spark-violet-800: #453899;
  --color-spark-violet-900: #312771;
  --color-spark-violet-950: #1E184D;

  /* Cool Neutral */
  --color-cool-neutral-50: #F5F8F6;
  --color-cool-neutral-100: #E3F0EE;
  --color-cool-neutral-200: #D1DEDB;
  --color-cool-neutral-300: #BBC7C5;
  --color-cool-neutral-400: #9CA8A5;
  --color-cool-neutral-500: #7D8987;
  --color-cool-neutral-600: #636F6C;
  --color-cool-neutral-700: #4D5856;
  --color-cool-neutral-800: #3A4543;
  --color-cool-neutral-900: #2B3533;
  --color-cool-neutral-950: #0C2A26;

  /* Night Pond (dark surfaces) */
  --color-night-pond-page: #0B1715;
  --color-night-pond-sunken-2: #060E0C;
  --color-night-pond-sunken: #08120F;
  --color-night-pond-surface: #12221F;
  --color-night-pond-raised: #172523;
  --color-night-pond-overlay: #1C2C29;
  --color-night-pond-border: #1E302C;
  --color-night-pond-border-strong: #2A3E3A;
  --color-night-pond-border-heavy: #3A504B;
  --color-night-pond-text-muted: #9DB0AB;
  --color-night-pond-text: #E9F2EF;

  /* Base */
  --color-white: #FFFFFF;

  /* Success */
  --color-success-50: #E6FFE9;
  --color-success-100: #C2FFCD;
  --color-success-200: #A6EFB5;
  --color-success-300: #87DB99;
  --color-success-400: #62C37A;
  --color-success-500: #36AC5B;
  --color-success-600: #058F41;
  --color-success-700: #017433;
  --color-success-800: #025A27;
  --color-success-900: #00421A;
  --color-success-950: #012A0F;

  /* Warning */
  --color-warning-50: #FEF5EB;
  --color-warning-100: #FEE9D2;
  --color-warning-200: #FED29F;
  --color-warning-300: #F7B566;
  --color-warning-400: #E29936;
  --color-warning-500: #C88008;
  --color-warning-600: #A46806;
  --color-warning-700: #855404;
  --color-warning-800: #684002;
  --color-warning-900: #4C2E01;
  --color-warning-950: #321C00;

  /* Critical */
  --color-critical-50: #FEF4F3;
  --color-critical-100: #FFE6E4;
  --color-critical-200: #FECDC8;
  --color-critical-300: #FEABA4;
  --color-critical-400: #F7857D;
  --color-critical-500: #E2655F;
  --color-critical-600: #C54643;
  --color-critical-700: #A33433;
  --color-critical-800: #822423;
  --color-critical-900: #631315;
  --color-critical-950: #450307;

  /* ========================================================================
     SEMANTIC TOKENS — LIGHT MODE
     ======================================================================== */
  /* --- Background --- */
  --color-bg-canvas: var(--color-cool-neutral-50);
  --color-bg-default: var(--color-white);
  --color-bg-subtle: #EEF5F4;
  --color-bg-muted: var(--color-cool-neutral-100);
  --color-bg-emphasis: var(--color-cool-neutral-200);
  --color-bg-inverse: var(--color-cool-neutral-950);
  --color-bg-active: var(--color-spark-violet-50);

  /* --- Surface --- */
  --color-surface-default: var(--color-white);
  --color-surface-default-subtle: var(--color-cool-neutral-50);
  --color-surface-raised: var(--color-white);
  --color-surface-overlay: var(--color-white);
  --color-surface-sunken: var(--color-cool-neutral-100);
  --color-surface-sunken2: var(--color-cool-neutral-200);

  /* --- Text --- */
  --color-text-primary: var(--color-cool-neutral-950);
  --color-text-secondary: var(--color-cool-neutral-700);
  --color-text-tertiary: var(--color-cool-neutral-600);
  --color-text-placeholder: var(--color-cool-neutral-600);
  --color-text-placeholder-subtle: var(--color-cool-neutral-500);
  --color-text-disabled: var(--color-cool-neutral-400);
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-spark-violet-800);
  --color-text-link-hover: var(--color-spark-violet-900);

  /* --- Icon --- */
  --color-icon-primary: var(--color-cool-neutral-950);
  --color-icon-secondary: var(--color-cool-neutral-700);
  --color-icon-tertiary: var(--color-cool-neutral-600);
  --color-icon-placeholder: var(--color-cool-neutral-600);
  --color-icon-placeholder-subtle: var(--color-cool-neutral-500);
  --color-icon-disabled: var(--color-cool-neutral-400);
  --color-icon-inverse: var(--color-white);
  --color-icon-link: var(--color-spark-violet-800);
  --color-icon-link-hover: var(--color-spark-violet-900);

  /* --- Brand --- */
  --color-brand-primary: var(--color-spark-violet-800);
  --color-brand-primary-hover: var(--color-spark-violet-900);
  --color-brand-primary-active: var(--color-spark-violet-950);
  --color-brand-on-primary: var(--color-white);
  --color-brand-primary-subtle: var(--color-spark-violet-50);
  --color-brand-primary-muted: var(--color-spark-violet-200);
  --color-brand-secondary: var(--color-pond-teal-700);
  --color-brand-secondary-hover: var(--color-pond-teal-800);
  --color-brand-secondary-active: var(--color-pond-teal-900);
  --color-brand-on-secondary: var(--color-white);
  --color-brand-secondary-subtle: var(--color-pond-teal-50);
  --color-brand-secondary-subtle2: var(--color-pond-teal-100);
  --color-brand-secondary-muted: var(--color-pond-teal-200);
  --color-brand-tertiary: var(--color-spark-violet-600);
  --color-brand-tertiary-hover: var(--color-spark-violet-700);
  --color-brand-tertiary-active: var(--color-spark-violet-800);
  --color-brand-on-tertiary: var(--color-white);
  --color-brand-tertiary-subtle: var(--color-spark-violet-100);
  --color-brand-tertiary-muted: var(--color-spark-violet-300);

  /* --- Interactive --- */
  --color-interactive-primary: var(--color-spark-violet-800);
  --color-interactive-primary-hover: var(--color-spark-violet-900);
  --color-interactive-primary-active: var(--color-spark-violet-950);
  --color-interactive-primary-disabled: var(--color-cool-neutral-200);
  --color-interactive-secondary: var(--color-cool-neutral-100);
  --color-interactive-secondary-hover: var(--color-cool-neutral-200);
  --color-interactive-ghost-hover: var(--color-cool-neutral-100);

  /* --- Border --- */
  --color-border-on-canvas: var(--color-cool-neutral-200);
  --color-border-subtle: #E1EAE8;
  --color-border-medium: var(--color-cool-neutral-200);
  --color-border-default: var(--color-cool-neutral-300);
  --color-border-strong: var(--color-cool-neutral-500);
  --color-border-focus: var(--color-spark-violet-500);

  /* --- Status / Success --- */
  --color-success-bg: #05893E;
  --color-success-bg-subtle: #EAFAEC;
  --color-success-border: #A6DAAF;
  --color-success-text: #016129;
  --color-success-icon: #05893E;
  --color-success-action: #007132;
  --color-success-action-hover: #035D28;

  /* --- Status / Warning --- */
  --color-warning-bg: #FEA92F;
  --color-warning-bg-subtle: #FFF3E6;
  --color-warning-border: #EDC291;
  --color-warning-text: #774A03;
  --color-warning-icon: #B87501;
  --color-warning-action: #FAAB3F;
  --color-warning-action-hover: var(--color-warning-400);

  /* --- Status / Critical --- */
  --color-critical-bg: #BD413F;
  --color-critical-bg-subtle: #FEF2F1;
  --color-critical-border: #FBB7B0;
  --color-critical-text: #892A29;
  --color-critical-icon: #BD413F;
  --color-critical-action: #A12F2F;
  --color-critical-action-hover: #892122;
  --color-critical-disabled: #F7CBC7;

  /* --- Table --- */
  --color-table-bg-white: var(--color-white);
  --color-table-header-bg-grey: var(--color-cool-neutral-50);

  /* --- Tab --- */
  --color-tab-on-bg: var(--color-white);
  --color-tab-on-canvas: var(--color-white);

  /* --- Avatar --- */
  --color-avatar-blue-bg: #D9EAFF;
  --color-avatar-blue-text: #0B4C92;
  --color-avatar-indigo-bg: #E1E7FE;
  --color-avatar-indigo-text: #3B4392;
  --color-avatar-violet-bg: #E9E4FE;
  --color-avatar-violet-text: #543A8B;
  --color-avatar-plum-bg: #FEDBFA;
  --color-avatar-plum-text: #722C6E;
  --color-avatar-rust-bg: #FEE0D6;
  --color-avatar-rust-text: #842B02;
  --color-avatar-amber-bg: #FEE3BF;
  --color-avatar-amber-text: #694501;
  --color-avatar-forest-bg: #D0F3D0;
  --color-avatar-forest-text: #045E17;
  --color-avatar-teal-bg: #BDF6E9;
  --color-avatar-teal-text: #015A4F;
  --color-avatar-slate-bg: #E1E9EF;
  --color-avatar-slate-text: #434F57;

  /* --- Label --- */
  --color-label-amber-bg: #FEE3BF;
  --color-label-amber-text: #694501;
  --color-label-black-bg: var(--color-cool-neutral-950);
  --color-label-black-text: var(--color-white);
  --color-label-red-bg: #FEE0DD;
  --color-label-red-text: #862726;
  --color-label-orange-bg: #FEE1D2;
  --color-label-orange-text: #7B3702;
  --color-label-grey-bg: var(--color-cool-neutral-100);
  --color-label-grey-text: var(--color-cool-neutral-800);
  --color-label-green-bg: #D0F3D0;
  --color-label-green-text: #045E17;
  --color-label-teal-bg: #BDF6E9;
  --color-label-teal-text: #015A4F;
  --color-label-sky-bg: #CCEEFF;
  --color-label-sky-text: #045571;
  --color-label-indigo-bg: #E1E7FE;
  --color-label-indigo-text: #3B4392;
  --color-label-purple-bg: #EEE2FE;
  --color-label-purple-text: #5E3685;
  --color-label-pink-bg: #FEDEEC;
  --color-label-pink-text: #7E2757;

  /* --- Button / primary --- */
  --btn-primary-bg: var(--color-spark-violet-800);
  --btn-primary-bg-hover: var(--color-spark-violet-900);
  --btn-primary-bg-active: var(--color-spark-violet-950);
  --btn-primary-label: var(--color-white);
  --btn-primary-bg-disabled: var(--color-cool-neutral-200);
  --btn-primary-label-disabled: var(--color-cool-neutral-500);
  --btn-primary-focus-ring: var(--color-spark-violet-500);
  --btn-primary-focus-ring-offset: var(--color-white);

  /* --- Button / secondary-color --- */
  --btn-secondary-color-bg: var(--color-spark-violet-50);
  --btn-secondary-color-bg-hover: var(--color-spark-violet-100);
  --btn-secondary-color-bg-active: var(--color-spark-violet-200);
  --btn-secondary-color-label: var(--color-spark-violet-800);
  --btn-secondary-color-border: var(--color-spark-violet-200);
  --btn-secondary-color-bg-disabled: var(--color-cool-neutral-100);
  --btn-secondary-color-label-disabled: var(--color-cool-neutral-400);
  --btn-secondary-color-focus-ring: var(--color-spark-violet-500);

  /* --- Button / secondary-gray --- */
  --btn-secondary-gray-bg: var(--color-cool-neutral-100);
  --btn-secondary-gray-bg-hover: var(--color-cool-neutral-200);
  --btn-secondary-gray-bg-active: var(--color-cool-neutral-300);
  --btn-secondary-gray-bg-disabled: var(--color-cool-neutral-50);
  --btn-secondary-gray-label: var(--color-cool-neutral-800);
  --btn-secondary-gray-label-active: var(--color-cool-neutral-950);
  --btn-secondary-gray-label-disabled: var(--color-cool-neutral-400);

  /* --- Button / outline-color --- */
  --btn-outline-color-bg: transparent;
  --btn-outline-color-border: var(--color-spark-violet-300);
  --btn-outline-color-border-hover: var(--color-spark-violet-500);
  --btn-outline-color-border-active: var(--color-spark-violet-800);
  --btn-outline-color-label: var(--color-spark-violet-800);
  --btn-outline-color-label-active: var(--color-spark-violet-950);
  --btn-outline-color-border-disabled: var(--color-cool-neutral-200);
  --btn-outline-color-label-disabled: var(--color-cool-neutral-400);
  --btn-outline-color-focus-ring: var(--color-spark-violet-500);

  /* --- Button / outline-gray --- */
  --btn-outline-gray-bg: var(--color-white);
  --btn-outline-gray-border: var(--color-cool-neutral-300);
  --btn-outline-gray-border-active: var(--color-cool-neutral-600);
  --btn-outline-gray-label: var(--color-cool-neutral-800);
  --btn-outline-gray-label-active: var(--color-cool-neutral-950);
  --btn-outline-gray-border-disabled: var(--color-cool-neutral-200);
  --btn-outline-gray-label-disabled: var(--color-cool-neutral-400);
  --btn-outline-gray-focus-ring: var(--color-spark-violet-500);

  /* --- Button / ghost-color --- */
  --btn-ghost-color-bg: transparent;
  --btn-ghost-color-label: var(--color-spark-violet-800);
  --btn-ghost-color-label-active: var(--color-spark-violet-950);
  --btn-ghost-color-border-disabled: transparent;
  --btn-ghost-color-label-disabled: var(--color-cool-neutral-400);

  /* --- Button / ghost-gray --- */
  --btn-ghost-gray-bg: transparent;
  --btn-ghost-gray-bg-hover: var(--color-cool-neutral-100);
  --btn-ghost-gray-bg-active: var(--color-cool-neutral-200);
  --btn-ghost-gray-bg-disabled: transparent;
  --btn-ghost-gray-label: var(--color-cool-neutral-800);
  --btn-ghost-gray-label-active: var(--color-cool-neutral-950);
  --btn-ghost-gray-label-disabled: var(--color-cool-neutral-400);

  /* --- Button / link-color --- */
  --btn-link-color-label: var(--color-spark-violet-800);
  --btn-link-color-label-hover: var(--color-spark-violet-900);
  --btn-link-color-label-disabled: var(--color-cool-neutral-400);

  /* --- Button / link-gray --- */
  --btn-link-gray-label: var(--color-cool-neutral-700);
  --btn-link-gray-label-hover: var(--color-cool-neutral-950);
  --btn-link-gray-label-disabled: var(--color-cool-neutral-400);
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* --- Background --- */
    --color-bg-canvas: var(--color-night-pond-page);
    --color-bg-default: var(--color-night-pond-surface);
    --color-bg-subtle: #0E1A18;
    --color-bg-muted: var(--color-night-pond-raised);
    --color-bg-emphasis: var(--color-night-pond-border);
    --color-bg-inverse: var(--color-night-pond-text);
    --color-bg-active: #1E1B36;

    /* --- Surface --- */
    --color-surface-default: var(--color-night-pond-surface);
    --color-surface-default-subtle: #101C1A;
    --color-surface-raised: var(--color-night-pond-raised);
    --color-surface-overlay: var(--color-night-pond-overlay);
    --color-surface-sunken: var(--color-night-pond-sunken);
    --color-surface-sunken2: var(--color-night-pond-sunken-2);

    /* --- Text --- */
    --color-text-primary: var(--color-night-pond-text);
    --color-text-secondary: #BCC7C5;
    --color-text-tertiary: var(--color-night-pond-text-muted);
    --color-text-placeholder: #8B9593;
    --color-text-placeholder-subtle: #6D7775;
    --color-text-disabled: #515A59;
    --color-text-inverse: var(--color-night-pond-page);
    --color-text-link: var(--color-spark-violet-300);
    --color-text-link-hover: var(--color-spark-violet-200);

    /* --- Icon --- */
    --color-icon-primary: var(--color-night-pond-text);
    --color-icon-secondary: #BCC7C5;
    --color-icon-tertiary: var(--color-night-pond-text-muted);
    --color-icon-placeholder: #8B9593;
    --color-icon-placeholder-subtle: #6D7775;
    --color-icon-disabled: #515A59;
    --color-icon-inverse: var(--color-night-pond-page);
    --color-icon-link: var(--color-spark-violet-300);
    --color-icon-link-hover: var(--color-spark-violet-200);

    /* --- Brand --- */
    --color-brand-primary: var(--color-spark-violet-400);
    --color-brand-primary-hover: var(--color-spark-violet-300);
    --color-brand-primary-active: var(--color-spark-violet-200);
    --color-brand-on-primary: var(--color-spark-violet-950);
    --color-brand-primary-subtle: #1E1B36;
    --color-brand-primary-muted: #2E2763;
    --color-brand-secondary: var(--color-pond-teal-400);
    --color-brand-secondary-hover: var(--color-pond-teal-300);
    --color-brand-secondary-active: var(--color-pond-teal-200);
    --color-brand-on-secondary: var(--color-pond-teal-950);
    --color-brand-secondary-subtle: #0E2A24;
    --color-brand-secondary-subtle2: #123A32;
    --color-brand-secondary-muted: #1A4D43;
    --color-brand-tertiary: var(--color-spark-violet-500);
    --color-brand-tertiary-hover: var(--color-spark-violet-400);
    --color-brand-tertiary-active: var(--color-spark-violet-300);
    --color-brand-on-tertiary: var(--color-spark-violet-950);
    --color-brand-tertiary-subtle: #24204A;
    --color-brand-tertiary-muted: #3A3280;

    /* --- Interactive --- */
    --color-interactive-primary: var(--color-spark-violet-400);
    --color-interactive-primary-hover: var(--color-spark-violet-300);
    --color-interactive-primary-active: var(--color-spark-violet-200);
    --color-interactive-primary-disabled: var(--color-night-pond-border);
    --color-interactive-secondary: var(--color-night-pond-raised);
    --color-interactive-secondary-hover: var(--color-night-pond-border);
    --color-interactive-ghost-hover: var(--color-night-pond-raised);

    /* --- Border --- */
    --color-border-on-canvas: var(--color-night-pond-border);
    --color-border-subtle: var(--color-night-pond-border);
    --color-border-medium: var(--color-night-pond-border-strong);
    --color-border-default: var(--color-night-pond-border-heavy);
    --color-border-strong: #697472;
    --color-border-focus: var(--color-spark-violet-400);

    /* --- Status / Success --- */
    --color-success-bg: var(--color-success-400);
    --color-success-bg-subtle: #0E2213;
    --color-success-border: #1D4E2B;
    --color-success-text: #9BDDA8;
    --color-success-icon: #6FC884;
    --color-success-action: #6FC884;
    --color-success-action-hover: #8FD89E;

    /* --- Status / Warning --- */
    --color-warning-bg: #F7AC4D;
    --color-warning-bg-subtle: #291906;
    --color-warning-border: #5D3904;
    --color-warning-text: #F5BF81;
    --color-warning-icon: #E5A14B;
    --color-warning-action: #F3AE58;
    --color-warning-action-hover: #FFC581;

    /* --- Status / Critical --- */
    --color-critical-bg: var(--color-critical-400);
    --color-critical-bg-subtle: #2D1513;
    --color-critical-border: #662F2C;
    --color-critical-text: #FEB5AE;
    --color-critical-icon: #F98F87;
    --color-critical-action: #F98F87;
    --color-critical-action-hover: #FFABA3;
    --color-critical-disabled: #492826;

    /* --- Table --- */
    --color-table-bg-white: var(--color-night-pond-surface);
    --color-table-header-bg-grey: var(--color-night-pond-raised);

    /* --- Tab --- */
    --color-tab-on-bg: var(--color-night-pond-raised);
    --color-tab-on-canvas: var(--color-night-pond-surface);

    /* --- Avatar --- */
    --color-avatar-blue-bg: #182E4B;
    --color-avatar-blue-text: #B3D4FF;
    --color-avatar-indigo-bg: #252B4C;
    --color-avatar-indigo-text: #C3CEFE;
    --color-avatar-violet-bg: #302749;
    --color-avatar-violet-text: #D4C8FE;
    --color-avatar-plum-bg: #3E223C;
    --color-avatar-plum-text: #F3BCED;
    --color-avatar-rust-bg: #472215;
    --color-avatar-rust-text: #FFC0AB;
    --color-avatar-amber-bg: #3F2903;
    --color-avatar-amber-text: #F4C98E;
    --color-avatar-forest-bg: #18361A;
    --color-avatar-forest-text: #ACE1AD;
    --color-avatar-teal-bg: #01362F;
    --color-avatar-teal-text: #8CE5D3;
    --color-avatar-slate-bg: #282F33;
    --color-avatar-slate-text: #C5D3DC;

    /* --- Label --- */
    --color-label-amber-bg: #3F2903;
    --color-label-amber-text: #F4C98E;
    --color-label-black-bg: var(--color-night-pond-text);
    --color-label-black-text: var(--color-night-pond-page);
    --color-label-red-bg: #47211E;
    --color-label-red-text: #FEBFB9;
    --color-label-orange-bg: #45240F;
    --color-label-orange-text: #FFC2A0;
    --color-label-grey-bg: var(--color-night-pond-raised);
    --color-label-grey-text: #C6D0CE;
    --color-label-green-bg: #18361A;
    --color-label-green-text: #ACE1AD;
    --color-label-teal-bg: #01362F;
    --color-label-teal-text: #8CE5D3;
    --color-label-sky-bg: #003346;
    --color-label-sky-text: #95DCFF;
    --color-label-indigo-bg: #252B4C;
    --color-label-indigo-text: #C3CEFE;
    --color-label-purple-bg: #352546;
    --color-label-purple-text: #DEC3FF;
    --color-label-pink-bg: #442032;
    --color-label-pink-text: #FEBAD9;

    /* --- Button / primary --- */
    --btn-primary-bg: var(--color-spark-violet-400);
    --btn-primary-bg-hover: var(--color-spark-violet-300);
    --btn-primary-bg-active: var(--color-spark-violet-200);
    --btn-primary-label: var(--color-spark-violet-950);
    --btn-primary-bg-disabled: var(--color-night-pond-border);
    --btn-primary-label-disabled: #5C6664;
    --btn-primary-focus-ring: var(--color-spark-violet-400);
    --btn-primary-focus-ring-offset: var(--color-night-pond-page);

    /* --- Button / secondary-color --- */
    --btn-secondary-color-bg: #1E1B36;
    --btn-secondary-color-bg-hover: #2A2550;
    --btn-secondary-color-bg-active: #352E68;
    --btn-secondary-color-label: var(--color-spark-violet-200);
    --btn-secondary-color-border: #3A3280;
    --btn-secondary-color-bg-disabled: var(--color-night-pond-raised);
    --btn-secondary-color-label-disabled: #515A59;
    --btn-secondary-color-focus-ring: var(--color-spark-violet-400);

    /* --- Button / secondary-gray --- */
    --btn-secondary-gray-bg: var(--color-night-pond-raised);
    --btn-secondary-gray-bg-hover: var(--color-night-pond-border);
    --btn-secondary-gray-bg-active: var(--color-night-pond-border-strong);
    --btn-secondary-gray-bg-disabled: var(--color-night-pond-surface);
    --btn-secondary-gray-label: #CFDAD8;
    --btn-secondary-gray-label-active: var(--color-night-pond-text);
    --btn-secondary-gray-label-disabled: #515A59;

    /* --- Button / outline-color --- */
    --btn-outline-color-bg: transparent;
    --btn-outline-color-border: #4A4199;
    --btn-outline-color-border-hover: var(--color-spark-violet-500);
    --btn-outline-color-border-active: var(--color-spark-violet-300);
    --btn-outline-color-label: var(--color-spark-violet-300);
    --btn-outline-color-label-active: var(--color-spark-violet-200);
    --btn-outline-color-border-disabled: var(--color-night-pond-border);
    --btn-outline-color-label-disabled: #515A59;
    --btn-outline-color-focus-ring: var(--color-spark-violet-400);

    /* --- Button / outline-gray --- */
    --btn-outline-gray-bg: transparent;
    --btn-outline-gray-border: var(--color-night-pond-border-heavy);
    --btn-outline-gray-border-active: var(--color-cool-neutral-500);
    --btn-outline-gray-label: #CFDAD8;
    --btn-outline-gray-label-active: var(--color-night-pond-text);
    --btn-outline-gray-border-disabled: var(--color-night-pond-border);
    --btn-outline-gray-label-disabled: #515A59;
    --btn-outline-gray-focus-ring: var(--color-spark-violet-400);

    /* --- Button / ghost-color --- */
    --btn-ghost-color-bg: transparent;
    --btn-ghost-color-label: var(--color-spark-violet-300);
    --btn-ghost-color-label-active: var(--color-spark-violet-200);
    --btn-ghost-color-border-disabled: transparent;
    --btn-ghost-color-label-disabled: #515A59;

    /* --- Button / ghost-gray --- */
    --btn-ghost-gray-bg: transparent;
    --btn-ghost-gray-bg-hover: var(--color-night-pond-raised);
    --btn-ghost-gray-bg-active: var(--color-night-pond-border);
    --btn-ghost-gray-bg-disabled: transparent;
    --btn-ghost-gray-label: #CFDAD8;
    --btn-ghost-gray-label-active: var(--color-night-pond-text);
    --btn-ghost-gray-label-disabled: #515A59;

    /* --- Button / link-color --- */
    --btn-link-color-label: var(--color-spark-violet-300);
    --btn-link-color-label-hover: var(--color-spark-violet-200);
    --btn-link-color-label-disabled: #515A59;

    /* --- Button / link-gray --- */
    --btn-link-gray-label: #BCC7C5;
    --btn-link-gray-label-hover: var(--color-night-pond-text);
    --btn-link-gray-label-disabled: #515A59;
  }
}

/* Manual dark mode override (add .dark class to html, body or a section) */
.dark {
  /* --- Background --- */
  --color-bg-canvas: var(--color-night-pond-page);
  --color-bg-default: var(--color-night-pond-surface);
  --color-bg-subtle: #0E1A18;
  --color-bg-muted: var(--color-night-pond-raised);
  --color-bg-emphasis: var(--color-night-pond-border);
  --color-bg-inverse: var(--color-night-pond-text);
  --color-bg-active: #1E1B36;

  /* --- Surface --- */
  --color-surface-default: var(--color-night-pond-surface);
  --color-surface-default-subtle: #101C1A;
  --color-surface-raised: var(--color-night-pond-raised);
  --color-surface-overlay: var(--color-night-pond-overlay);
  --color-surface-sunken: var(--color-night-pond-sunken);
  --color-surface-sunken2: var(--color-night-pond-sunken-2);

  /* --- Text --- */
  --color-text-primary: var(--color-night-pond-text);
  --color-text-secondary: #BCC7C5;
  --color-text-tertiary: var(--color-night-pond-text-muted);
  --color-text-placeholder: #8B9593;
  --color-text-placeholder-subtle: #6D7775;
  --color-text-disabled: #515A59;
  --color-text-inverse: var(--color-night-pond-page);
  --color-text-link: var(--color-spark-violet-300);
  --color-text-link-hover: var(--color-spark-violet-200);

  /* --- Icon --- */
  --color-icon-primary: var(--color-night-pond-text);
  --color-icon-secondary: #BCC7C5;
  --color-icon-tertiary: var(--color-night-pond-text-muted);
  --color-icon-placeholder: #8B9593;
  --color-icon-placeholder-subtle: #6D7775;
  --color-icon-disabled: #515A59;
  --color-icon-inverse: var(--color-night-pond-page);
  --color-icon-link: var(--color-spark-violet-300);
  --color-icon-link-hover: var(--color-spark-violet-200);

  /* --- Brand --- */
  --color-brand-primary: var(--color-spark-violet-400);
  --color-brand-primary-hover: var(--color-spark-violet-300);
  --color-brand-primary-active: var(--color-spark-violet-200);
  --color-brand-on-primary: var(--color-spark-violet-950);
  --color-brand-primary-subtle: #1E1B36;
  --color-brand-primary-muted: #2E2763;
  --color-brand-secondary: var(--color-pond-teal-400);
  --color-brand-secondary-hover: var(--color-pond-teal-300);
  --color-brand-secondary-active: var(--color-pond-teal-200);
  --color-brand-on-secondary: var(--color-pond-teal-950);
  --color-brand-secondary-subtle: #0E2A24;
  --color-brand-secondary-subtle2: #123A32;
  --color-brand-secondary-muted: #1A4D43;
  --color-brand-tertiary: var(--color-spark-violet-500);
  --color-brand-tertiary-hover: var(--color-spark-violet-400);
  --color-brand-tertiary-active: var(--color-spark-violet-300);
  --color-brand-on-tertiary: var(--color-spark-violet-950);
  --color-brand-tertiary-subtle: #24204A;
  --color-brand-tertiary-muted: #3A3280;

  /* --- Interactive --- */
  --color-interactive-primary: var(--color-spark-violet-400);
  --color-interactive-primary-hover: var(--color-spark-violet-300);
  --color-interactive-primary-active: var(--color-spark-violet-200);
  --color-interactive-primary-disabled: var(--color-night-pond-border);
  --color-interactive-secondary: var(--color-night-pond-raised);
  --color-interactive-secondary-hover: var(--color-night-pond-border);
  --color-interactive-ghost-hover: var(--color-night-pond-raised);

  /* --- Border --- */
  --color-border-on-canvas: var(--color-night-pond-border);
  --color-border-subtle: var(--color-night-pond-border);
  --color-border-medium: var(--color-night-pond-border-strong);
  --color-border-default: var(--color-night-pond-border-heavy);
  --color-border-strong: #697472;
  --color-border-focus: var(--color-spark-violet-400);

  /* --- Status / Success --- */
  --color-success-bg: var(--color-success-400);
  --color-success-bg-subtle: #0E2213;
  --color-success-border: #1D4E2B;
  --color-success-text: #9BDDA8;
  --color-success-icon: #6FC884;
  --color-success-action: #6FC884;
  --color-success-action-hover: #8FD89E;

  /* --- Status / Warning --- */
  --color-warning-bg: #F7AC4D;
  --color-warning-bg-subtle: #291906;
  --color-warning-border: #5D3904;
  --color-warning-text: #F5BF81;
  --color-warning-icon: #E5A14B;
  --color-warning-action: #F3AE58;
  --color-warning-action-hover: #FFC581;

  /* --- Status / Critical --- */
  --color-critical-bg: var(--color-critical-400);
  --color-critical-bg-subtle: #2D1513;
  --color-critical-border: #662F2C;
  --color-critical-text: #FEB5AE;
  --color-critical-icon: #F98F87;
  --color-critical-action: #F98F87;
  --color-critical-action-hover: #FFABA3;
  --color-critical-disabled: #492826;

  /* --- Table --- */
  --color-table-bg-white: var(--color-night-pond-surface);
  --color-table-header-bg-grey: var(--color-night-pond-raised);

  /* --- Tab --- */
  --color-tab-on-bg: var(--color-night-pond-raised);
  --color-tab-on-canvas: var(--color-night-pond-surface);

  /* --- Avatar --- */
  --color-avatar-blue-bg: #182E4B;
  --color-avatar-blue-text: #B3D4FF;
  --color-avatar-indigo-bg: #252B4C;
  --color-avatar-indigo-text: #C3CEFE;
  --color-avatar-violet-bg: #302749;
  --color-avatar-violet-text: #D4C8FE;
  --color-avatar-plum-bg: #3E223C;
  --color-avatar-plum-text: #F3BCED;
  --color-avatar-rust-bg: #472215;
  --color-avatar-rust-text: #FFC0AB;
  --color-avatar-amber-bg: #3F2903;
  --color-avatar-amber-text: #F4C98E;
  --color-avatar-forest-bg: #18361A;
  --color-avatar-forest-text: #ACE1AD;
  --color-avatar-teal-bg: #01362F;
  --color-avatar-teal-text: #8CE5D3;
  --color-avatar-slate-bg: #282F33;
  --color-avatar-slate-text: #C5D3DC;

  /* --- Label --- */
  --color-label-amber-bg: #3F2903;
  --color-label-amber-text: #F4C98E;
  --color-label-black-bg: var(--color-night-pond-text);
  --color-label-black-text: var(--color-night-pond-page);
  --color-label-red-bg: #47211E;
  --color-label-red-text: #FEBFB9;
  --color-label-orange-bg: #45240F;
  --color-label-orange-text: #FFC2A0;
  --color-label-grey-bg: var(--color-night-pond-raised);
  --color-label-grey-text: #C6D0CE;
  --color-label-green-bg: #18361A;
  --color-label-green-text: #ACE1AD;
  --color-label-teal-bg: #01362F;
  --color-label-teal-text: #8CE5D3;
  --color-label-sky-bg: #003346;
  --color-label-sky-text: #95DCFF;
  --color-label-indigo-bg: #252B4C;
  --color-label-indigo-text: #C3CEFE;
  --color-label-purple-bg: #352546;
  --color-label-purple-text: #DEC3FF;
  --color-label-pink-bg: #442032;
  --color-label-pink-text: #FEBAD9;

  /* --- Button / primary --- */
  --btn-primary-bg: var(--color-spark-violet-400);
  --btn-primary-bg-hover: var(--color-spark-violet-300);
  --btn-primary-bg-active: var(--color-spark-violet-200);
  --btn-primary-label: var(--color-spark-violet-950);
  --btn-primary-bg-disabled: var(--color-night-pond-border);
  --btn-primary-label-disabled: #5C6664;
  --btn-primary-focus-ring: var(--color-spark-violet-400);
  --btn-primary-focus-ring-offset: var(--color-night-pond-page);

  /* --- Button / secondary-color --- */
  --btn-secondary-color-bg: #1E1B36;
  --btn-secondary-color-bg-hover: #2A2550;
  --btn-secondary-color-bg-active: #352E68;
  --btn-secondary-color-label: var(--color-spark-violet-200);
  --btn-secondary-color-border: #3A3280;
  --btn-secondary-color-bg-disabled: var(--color-night-pond-raised);
  --btn-secondary-color-label-disabled: #515A59;
  --btn-secondary-color-focus-ring: var(--color-spark-violet-400);

  /* --- Button / secondary-gray --- */
  --btn-secondary-gray-bg: var(--color-night-pond-raised);
  --btn-secondary-gray-bg-hover: var(--color-night-pond-border);
  --btn-secondary-gray-bg-active: var(--color-night-pond-border-strong);
  --btn-secondary-gray-bg-disabled: var(--color-night-pond-surface);
  --btn-secondary-gray-label: #CFDAD8;
  --btn-secondary-gray-label-active: var(--color-night-pond-text);
  --btn-secondary-gray-label-disabled: #515A59;

  /* --- Button / outline-color --- */
  --btn-outline-color-bg: transparent;
  --btn-outline-color-border: #4A4199;
  --btn-outline-color-border-hover: var(--color-spark-violet-500);
  --btn-outline-color-border-active: var(--color-spark-violet-300);
  --btn-outline-color-label: var(--color-spark-violet-300);
  --btn-outline-color-label-active: var(--color-spark-violet-200);
  --btn-outline-color-border-disabled: var(--color-night-pond-border);
  --btn-outline-color-label-disabled: #515A59;
  --btn-outline-color-focus-ring: var(--color-spark-violet-400);

  /* --- Button / outline-gray --- */
  --btn-outline-gray-bg: transparent;
  --btn-outline-gray-border: var(--color-night-pond-border-heavy);
  --btn-outline-gray-border-active: var(--color-cool-neutral-500);
  --btn-outline-gray-label: #CFDAD8;
  --btn-outline-gray-label-active: var(--color-night-pond-text);
  --btn-outline-gray-border-disabled: var(--color-night-pond-border);
  --btn-outline-gray-label-disabled: #515A59;
  --btn-outline-gray-focus-ring: var(--color-spark-violet-400);

  /* --- Button / ghost-color --- */
  --btn-ghost-color-bg: transparent;
  --btn-ghost-color-label: var(--color-spark-violet-300);
  --btn-ghost-color-label-active: var(--color-spark-violet-200);
  --btn-ghost-color-border-disabled: transparent;
  --btn-ghost-color-label-disabled: #515A59;

  /* --- Button / ghost-gray --- */
  --btn-ghost-gray-bg: transparent;
  --btn-ghost-gray-bg-hover: var(--color-night-pond-raised);
  --btn-ghost-gray-bg-active: var(--color-night-pond-border);
  --btn-ghost-gray-bg-disabled: transparent;
  --btn-ghost-gray-label: #CFDAD8;
  --btn-ghost-gray-label-active: var(--color-night-pond-text);
  --btn-ghost-gray-label-disabled: #515A59;

  /* --- Button / link-color --- */
  --btn-link-color-label: var(--color-spark-violet-300);
  --btn-link-color-label-hover: var(--color-spark-violet-200);
  --btn-link-color-label-disabled: #515A59;

  /* --- Button / link-gray --- */
  --btn-link-gray-label: #BCC7C5;
  --btn-link-gray-label-hover: var(--color-night-pond-text);
  --btn-link-gray-label-disabled: #515A59;
}

/* Manual light mode override — pins a section to light values, e.g. light
   tiles inside a .dark card, or the whole page when dark mode is unwanted */
.light {
  /* --- Background --- */
  --color-bg-canvas: var(--color-cool-neutral-50);
  --color-bg-default: var(--color-white);
  --color-bg-subtle: #EEF5F4;
  --color-bg-muted: var(--color-cool-neutral-100);
  --color-bg-emphasis: var(--color-cool-neutral-200);
  --color-bg-inverse: var(--color-cool-neutral-950);
  --color-bg-active: var(--color-spark-violet-50);

  /* --- Surface --- */
  --color-surface-default: var(--color-white);
  --color-surface-default-subtle: var(--color-cool-neutral-50);
  --color-surface-raised: var(--color-white);
  --color-surface-overlay: var(--color-white);
  --color-surface-sunken: var(--color-cool-neutral-100);
  --color-surface-sunken2: var(--color-cool-neutral-200);

  /* --- Text --- */
  --color-text-primary: var(--color-cool-neutral-950);
  --color-text-secondary: var(--color-cool-neutral-700);
  --color-text-tertiary: var(--color-cool-neutral-600);
  --color-text-placeholder: var(--color-cool-neutral-600);
  --color-text-placeholder-subtle: var(--color-cool-neutral-500);
  --color-text-disabled: var(--color-cool-neutral-400);
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-spark-violet-800);
  --color-text-link-hover: var(--color-spark-violet-900);

  /* --- Icon --- */
  --color-icon-primary: var(--color-cool-neutral-950);
  --color-icon-secondary: var(--color-cool-neutral-700);
  --color-icon-tertiary: var(--color-cool-neutral-600);
  --color-icon-placeholder: var(--color-cool-neutral-600);
  --color-icon-placeholder-subtle: var(--color-cool-neutral-500);
  --color-icon-disabled: var(--color-cool-neutral-400);
  --color-icon-inverse: var(--color-white);
  --color-icon-link: var(--color-spark-violet-800);
  --color-icon-link-hover: var(--color-spark-violet-900);

  /* --- Brand --- */
  --color-brand-primary: var(--color-spark-violet-800);
  --color-brand-primary-hover: var(--color-spark-violet-900);
  --color-brand-primary-active: var(--color-spark-violet-950);
  --color-brand-on-primary: var(--color-white);
  --color-brand-primary-subtle: var(--color-spark-violet-50);
  --color-brand-primary-muted: var(--color-spark-violet-200);
  --color-brand-secondary: var(--color-pond-teal-700);
  --color-brand-secondary-hover: var(--color-pond-teal-800);
  --color-brand-secondary-active: var(--color-pond-teal-900);
  --color-brand-on-secondary: var(--color-white);
  --color-brand-secondary-subtle: var(--color-pond-teal-50);
  --color-brand-secondary-subtle2: var(--color-pond-teal-100);
  --color-brand-secondary-muted: var(--color-pond-teal-200);
  --color-brand-tertiary: var(--color-spark-violet-600);
  --color-brand-tertiary-hover: var(--color-spark-violet-700);
  --color-brand-tertiary-active: var(--color-spark-violet-800);
  --color-brand-on-tertiary: var(--color-white);
  --color-brand-tertiary-subtle: var(--color-spark-violet-100);
  --color-brand-tertiary-muted: var(--color-spark-violet-300);

  /* --- Interactive --- */
  --color-interactive-primary: var(--color-spark-violet-800);
  --color-interactive-primary-hover: var(--color-spark-violet-900);
  --color-interactive-primary-active: var(--color-spark-violet-950);
  --color-interactive-primary-disabled: var(--color-cool-neutral-200);
  --color-interactive-secondary: var(--color-cool-neutral-100);
  --color-interactive-secondary-hover: var(--color-cool-neutral-200);
  --color-interactive-ghost-hover: var(--color-cool-neutral-100);

  /* --- Border --- */
  --color-border-on-canvas: var(--color-cool-neutral-200);
  --color-border-subtle: #E1EAE8;
  --color-border-medium: var(--color-cool-neutral-200);
  --color-border-default: var(--color-cool-neutral-300);
  --color-border-strong: var(--color-cool-neutral-500);
  --color-border-focus: var(--color-spark-violet-500);

  /* --- Status / Success --- */
  --color-success-bg: #05893E;
  --color-success-bg-subtle: #EAFAEC;
  --color-success-border: #A6DAAF;
  --color-success-text: #016129;
  --color-success-icon: #05893E;
  --color-success-action: #007132;
  --color-success-action-hover: #035D28;

  /* --- Status / Warning --- */
  --color-warning-bg: #FEA92F;
  --color-warning-bg-subtle: #FFF3E6;
  --color-warning-border: #EDC291;
  --color-warning-text: #774A03;
  --color-warning-icon: #B87501;
  --color-warning-action: #FAAB3F;
  --color-warning-action-hover: var(--color-warning-400);

  /* --- Status / Critical --- */
  --color-critical-bg: #BD413F;
  --color-critical-bg-subtle: #FEF2F1;
  --color-critical-border: #FBB7B0;
  --color-critical-text: #892A29;
  --color-critical-icon: #BD413F;
  --color-critical-action: #A12F2F;
  --color-critical-action-hover: #892122;
  --color-critical-disabled: #F7CBC7;

  /* --- Table --- */
  --color-table-bg-white: var(--color-white);
  --color-table-header-bg-grey: var(--color-cool-neutral-50);

  /* --- Tab --- */
  --color-tab-on-bg: var(--color-white);
  --color-tab-on-canvas: var(--color-white);

  /* --- Avatar --- */
  --color-avatar-blue-bg: #D9EAFF;
  --color-avatar-blue-text: #0B4C92;
  --color-avatar-indigo-bg: #E1E7FE;
  --color-avatar-indigo-text: #3B4392;
  --color-avatar-violet-bg: #E9E4FE;
  --color-avatar-violet-text: #543A8B;
  --color-avatar-plum-bg: #FEDBFA;
  --color-avatar-plum-text: #722C6E;
  --color-avatar-rust-bg: #FEE0D6;
  --color-avatar-rust-text: #842B02;
  --color-avatar-amber-bg: #FEE3BF;
  --color-avatar-amber-text: #694501;
  --color-avatar-forest-bg: #D0F3D0;
  --color-avatar-forest-text: #045E17;
  --color-avatar-teal-bg: #BDF6E9;
  --color-avatar-teal-text: #015A4F;
  --color-avatar-slate-bg: #E1E9EF;
  --color-avatar-slate-text: #434F57;

  /* --- Label --- */
  --color-label-amber-bg: #FEE3BF;
  --color-label-amber-text: #694501;
  --color-label-black-bg: var(--color-cool-neutral-950);
  --color-label-black-text: var(--color-white);
  --color-label-red-bg: #FEE0DD;
  --color-label-red-text: #862726;
  --color-label-orange-bg: #FEE1D2;
  --color-label-orange-text: #7B3702;
  --color-label-grey-bg: var(--color-cool-neutral-100);
  --color-label-grey-text: var(--color-cool-neutral-800);
  --color-label-green-bg: #D0F3D0;
  --color-label-green-text: #045E17;
  --color-label-teal-bg: #BDF6E9;
  --color-label-teal-text: #015A4F;
  --color-label-sky-bg: #CCEEFF;
  --color-label-sky-text: #045571;
  --color-label-indigo-bg: #E1E7FE;
  --color-label-indigo-text: #3B4392;
  --color-label-purple-bg: #EEE2FE;
  --color-label-purple-text: #5E3685;
  --color-label-pink-bg: #FEDEEC;
  --color-label-pink-text: #7E2757;

  /* --- Button / primary --- */
  --btn-primary-bg: var(--color-spark-violet-800);
  --btn-primary-bg-hover: var(--color-spark-violet-900);
  --btn-primary-bg-active: var(--color-spark-violet-950);
  --btn-primary-label: var(--color-white);
  --btn-primary-bg-disabled: var(--color-cool-neutral-200);
  --btn-primary-label-disabled: var(--color-cool-neutral-500);
  --btn-primary-focus-ring: var(--color-spark-violet-500);
  --btn-primary-focus-ring-offset: var(--color-white);

  /* --- Button / secondary-color --- */
  --btn-secondary-color-bg: var(--color-spark-violet-50);
  --btn-secondary-color-bg-hover: var(--color-spark-violet-100);
  --btn-secondary-color-bg-active: var(--color-spark-violet-200);
  --btn-secondary-color-label: var(--color-spark-violet-800);
  --btn-secondary-color-border: var(--color-spark-violet-200);
  --btn-secondary-color-bg-disabled: var(--color-cool-neutral-100);
  --btn-secondary-color-label-disabled: var(--color-cool-neutral-400);
  --btn-secondary-color-focus-ring: var(--color-spark-violet-500);

  /* --- Button / secondary-gray --- */
  --btn-secondary-gray-bg: var(--color-cool-neutral-100);
  --btn-secondary-gray-bg-hover: var(--color-cool-neutral-200);
  --btn-secondary-gray-bg-active: var(--color-cool-neutral-300);
  --btn-secondary-gray-bg-disabled: var(--color-cool-neutral-50);
  --btn-secondary-gray-label: var(--color-cool-neutral-800);
  --btn-secondary-gray-label-active: var(--color-cool-neutral-950);
  --btn-secondary-gray-label-disabled: var(--color-cool-neutral-400);

  /* --- Button / outline-color --- */
  --btn-outline-color-bg: transparent;
  --btn-outline-color-border: var(--color-spark-violet-300);
  --btn-outline-color-border-hover: var(--color-spark-violet-500);
  --btn-outline-color-border-active: var(--color-spark-violet-800);
  --btn-outline-color-label: var(--color-spark-violet-800);
  --btn-outline-color-label-active: var(--color-spark-violet-950);
  --btn-outline-color-border-disabled: var(--color-cool-neutral-200);
  --btn-outline-color-label-disabled: var(--color-cool-neutral-400);
  --btn-outline-color-focus-ring: var(--color-spark-violet-500);

  /* --- Button / outline-gray --- */
  --btn-outline-gray-bg: var(--color-white);
  --btn-outline-gray-border: var(--color-cool-neutral-300);
  --btn-outline-gray-border-active: var(--color-cool-neutral-600);
  --btn-outline-gray-label: var(--color-cool-neutral-800);
  --btn-outline-gray-label-active: var(--color-cool-neutral-950);
  --btn-outline-gray-border-disabled: var(--color-cool-neutral-200);
  --btn-outline-gray-label-disabled: var(--color-cool-neutral-400);
  --btn-outline-gray-focus-ring: var(--color-spark-violet-500);

  /* --- Button / ghost-color --- */
  --btn-ghost-color-bg: transparent;
  --btn-ghost-color-label: var(--color-spark-violet-800);
  --btn-ghost-color-label-active: var(--color-spark-violet-950);
  --btn-ghost-color-border-disabled: transparent;
  --btn-ghost-color-label-disabled: var(--color-cool-neutral-400);

  /* --- Button / ghost-gray --- */
  --btn-ghost-gray-bg: transparent;
  --btn-ghost-gray-bg-hover: var(--color-cool-neutral-100);
  --btn-ghost-gray-bg-active: var(--color-cool-neutral-200);
  --btn-ghost-gray-bg-disabled: transparent;
  --btn-ghost-gray-label: var(--color-cool-neutral-800);
  --btn-ghost-gray-label-active: var(--color-cool-neutral-950);
  --btn-ghost-gray-label-disabled: var(--color-cool-neutral-400);

  /* --- Button / link-color --- */
  --btn-link-color-label: var(--color-spark-violet-800);
  --btn-link-color-label-hover: var(--color-spark-violet-900);
  --btn-link-color-label-disabled: var(--color-cool-neutral-400);

  /* --- Button / link-gray --- */
  --btn-link-gray-label: var(--color-cool-neutral-700);
  --btn-link-gray-label-hover: var(--color-cool-neutral-950);
  --btn-link-gray-label-disabled: var(--color-cool-neutral-400);
}