/*
  Atoms Style Matrix (2x2)
  - style-ergo-opt + theme-light
  - style-ergo-opt + theme-dark
  - style-portal-opt + theme-light
  - style-portal-opt + theme-dark

  Legacy compatibility:
  - style-easy-start (alias of style-portal-opt)
  - theme-easystart-light / theme-easystart-dark
*/

.style-ergo-opt.theme-light {
  --eop-bg-primary: #fcfcf9;
  --eop-bg-secondary: #f3f3f0;
  --eop-surface-base: #ffffff;
  --eop-surface-sunken: #fcfcf9;
  --eop-surface-elevated: #ffffff;
  --eop-border-default: #d9d7d0;
  --eop-border-strong: #8b8882;
  --eop-border-subtle: #e8e7e4;
  --eop-text-primary: #1f2121;
  --eop-text-secondary: #6b6966;
  --eop-text-tertiary: #8b8882;
  --eop-text-inverse: #ffffff;
  --eop-text-disabled: rgba(31, 33, 33, 0.45);
  --eop-color-primary: #4fa8a8;
  --eop-color-primary-hover: #46959a;
  --eop-color-primary-active: #3d8282;
  --eop-color-secondary: #8b6f7f;
  --eop-color-secondary-hover: #78607d;
  --eop-color-secondary-active: #655165;
  --eop-color-accent: #a855f7;
  --eop-color-accent-hover: #b86bfa;
  --eop-color-accent-active: #9445da;
  --eop-color-accent-soft: #d8b4fe;
  --eop-color-accent-soft-hover: #e0c4ff;
  --eop-color-accent-soft-active: #c9a3f4;
  --eop-color-success: #2d8659;
  --eop-color-warning: #d97706;
  --eop-color-error: #c0152f;
  --eop-focus-border: var(--eop-color-primary);
  --eop-focus-ring: rgba(79, 168, 168, 0.3);
  --eop-hover-bg: rgba(79, 168, 168, 0.08);
  --eop-active-bg: rgba(79, 168, 168, 0.12);
}

.style-ergo-opt.theme-dark {
  --eop-bg-primary: #111622;
  --eop-bg-secondary: #1a2130;
  --eop-surface-base: #1f2738;
  --eop-surface-sunken: #131b2a;
  --eop-surface-elevated: #283246;
  --eop-border-default: #3a475d;
  --eop-border-strong: #6b7a95;
  --eop-border-subtle: #2d374d;
  --eop-text-primary: #f3f5fa;
  --eop-text-secondary: #b7c0d4;
  --eop-text-tertiary: #93a0bb;
  --eop-text-inverse: #111622;
  --eop-text-disabled: rgba(243, 245, 250, 0.42);
  --eop-color-primary: #6fc7c7;
  --eop-color-primary-hover: #81d2d2;
  --eop-color-primary-active: #57acac;
  --eop-color-secondary: #b491a6;
  --eop-color-secondary-hover: #c0a1b3;
  --eop-color-secondary-active: #9e7f93;
  --eop-color-accent: #d38bff;
  --eop-color-accent-hover: #dda2ff;
  --eop-color-accent-active: #c278f3;
  --eop-color-accent-soft: #a34ce6;
  --eop-color-accent-soft-hover: #b965ff;
  --eop-color-accent-soft-active: #8f3ed0;
  --eop-color-success: #44c383;
  --eop-color-warning: #e5a534;
  --eop-color-error: #ef6b80;
  --eop-focus-border: #6fc7c7;
  --eop-focus-ring: rgba(111, 199, 199, 0.35);
  --eop-hover-bg: rgba(111, 199, 199, 0.14);
  --eop-active-bg: rgba(111, 199, 199, 0.22);
}

.style-portal-opt.theme-light,
.style-easy-start.theme-light,
.theme-easystart-light {
  --eop-bg-primary: #f4f7fe;
  --eop-bg-secondary: #eef2fb;
  --eop-surface-base: #ffffff;
  --eop-surface-sunken: #ffffff;
  --eop-surface-elevated: #fbfcff;
  --eop-border-default: rgba(15, 23, 42, 0.08);
  --eop-border-strong: rgba(15, 23, 42, 0.18);
  --eop-border-subtle: rgba(15, 23, 42, 0.06);
  --eop-text-primary: #0b1e46;
  --eop-text-secondary: rgba(11, 30, 70, 0.65);
  --eop-text-tertiary: rgba(11, 30, 70, 0.5);
  --eop-text-inverse: #ffffff;
  --eop-text-disabled: rgba(11, 30, 70, 0.45);
  --eop-color-primary: #5140ff;
  --eop-color-primary-hover: #5e7bff;
  --eop-color-primary-active: #4738e5;
  --eop-color-secondary: #6674ea;
  --eop-color-secondary-hover: #5a67d8;
  --eop-color-secondary-active: #4e5bc6;
  --eop-color-accent: #a855f7;
  --eop-color-accent-hover: #b86bfa;
  --eop-color-accent-active: #9445da;
  --eop-color-accent-soft: #d8b4fe;
  --eop-color-accent-soft-hover: #e0c4ff;
  --eop-color-accent-soft-active: #c9a3f4;
  --eop-color-success: #36c07e;
  --eop-color-warning: #facc15;
  --eop-color-error: #f87171;
  --eop-focus-border: #5140ff;
  --eop-focus-ring: rgba(81, 64, 255, 0.24);
  --eop-hover-bg: rgba(81, 64, 255, 0.12);
  --eop-active-bg: rgba(81, 64, 255, 0.18);
}

.style-portal-opt.theme-dark,
.style-easy-start.theme-dark,
.theme-easystart-dark {
  --eop-bg-primary: #0f172a;
  --eop-bg-secondary: #121c32;
  --eop-surface-base: #131c33;
  --eop-surface-sunken: #0f1a31;
  --eop-surface-elevated: #1b2742;
  --eop-border-default: rgba(148, 163, 184, 0.18);
  --eop-border-strong: rgba(148, 163, 184, 0.28);
  --eop-border-subtle: rgba(148, 163, 184, 0.12);
  --eop-text-primary: #f8fafc;
  --eop-text-secondary: rgba(226, 232, 240, 0.72);
  --eop-text-tertiary: rgba(226, 232, 240, 0.55);
  --eop-text-inverse: #0f172a;
  --eop-text-disabled: rgba(226, 232, 240, 0.42);
  --eop-color-primary: #7c86ff;
  --eop-color-primary-hover: #96a0ff;
  --eop-color-primary-active: #6b75f5;
  --eop-color-secondary: #4f62c7;
  --eop-color-secondary-hover: #5a6fdc;
  --eop-color-secondary-active: #4658b2;
  --eop-color-accent: #c26bff;
  --eop-color-accent-hover: #d48aff;
  --eop-color-accent-active: #aa55ea;
  --eop-color-accent-soft: #9b5ae8;
  --eop-color-accent-soft-hover: #ad73ef;
  --eop-color-accent-soft-active: #8746d3;
  --eop-color-success: #4ade80;
  --eop-color-warning: #facc15;
  --eop-color-error: #f97316;
  --eop-focus-border: #7c86ff;
  --eop-focus-ring: rgba(124, 134, 255, 0.3);
  --eop-hover-bg: rgba(124, 134, 255, 0.2);
  --eop-active-bg: rgba(124, 134, 255, 0.28);
}

/* Mirror key tokens used by existing atoms that still reference --eox-* names. */
:is(
  .style-ergo-opt.theme-light,
  .style-ergo-opt.theme-dark,
  .style-portal-opt.theme-light,
  .style-portal-opt.theme-dark,
  .style-easy-start.theme-light,
  .style-easy-start.theme-dark,
  .theme-easystart-light,
  .theme-easystart-dark
) {
  --eox-color-primary: var(--eop-color-primary);
  --eox-color-secondary: var(--eop-color-secondary);
  --eox-color-secondary-hover: var(--eop-color-secondary-hover);
  --eox-color-secondary-active: var(--eop-color-secondary-active);
  --eox-color-accent: var(--eop-color-accent);
  --eox-color-accent-hover: var(--eop-color-accent-hover);
  --eox-color-accent-active: var(--eop-color-accent-active);
  --eox-color-accent-soft: var(--eop-color-accent-soft);
  --eox-color-accent-soft-hover: var(--eop-color-accent-soft-hover);
  --eox-color-accent-soft-active: var(--eop-color-accent-soft-active);
  --eox-color-error: var(--eop-color-error);
  --eox-border-default: var(--eop-border-default);
  --eox-border-subtle: var(--eop-border-subtle);
  --eox-text-primary: var(--eop-text-primary);
  --eox-text-secondary: var(--eop-text-secondary);
  --eox-text-tertiary: var(--eop-text-tertiary);
  --eox-text-disabled: var(--eop-text-disabled);
  --eox-focus-border: var(--eop-focus-border);
  --eox-focus-ring: var(--eop-focus-ring);
  --eox-surface-sunken: var(--eop-surface-sunken);
  --eox-surface-base: var(--eop-surface-base);
  --eox-surface-elevated: var(--eop-surface-elevated);
}

/* Atom fine tuning for both style families and both themes. */
:is(.style-ergo-opt, .style-portal-opt, .style-easy-start) :is(.button--secondary, .button--ghost) {
  border-color: var(--eop-border-default);
  color: var(--eop-text-primary);
}

:is(.style-ergo-opt, .style-portal-opt, .style-easy-start).theme-light :is(.input, .text-area, .text-input__control) {
  box-shadow: 0 1px 0 rgba(11, 30, 70, 0.02);
}

:is(.style-ergo-opt, .style-portal-opt, .style-easy-start).theme-dark :is(.input, .text-area, .text-input__control) {
  box-shadow: 0 1px 0 rgba(248, 250, 252, 0.03);
}

:is(.style-ergo-opt, .style-portal-opt, .style-easy-start) .radio-button__control {
  border-width: 1px;
}