/* COMMODO selected UI tokens. Generated by build_tokens.py. */
/* Apply data-palette="commodo" and data-mode="light" or "dark" to a root or wrapper. */
/* Font declarations are optional and live in typography.css. */

[data-palette="commodo"][data-mode="light"] {
  --logo-primary: #FBD424;
  --logo-secondary: #03E1F9;
  --page: #F7F8FC;
  --surface: #FFFFFF;
  --surface-raised: #EEF0F7;
  --text: #161D36;
  --text-muted: #4D5870;
  --border-subtle: #AEB9CF;
  --border-control: #68728D;
  --focus-ring: #5C4385;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-gap-surface: #F7F8FC;
  --support-violet: #5C4385;
  --support-deep-sea: #086D7E;
  --support-lilac: #E8E1F4;
  --support-cyan-mist: #DAF9FD;
  --support-soft-yellow: #FFF7CF;
  --primary-bg: #FBD424;
  --primary-fg: #161D36;
  --primary-hover: #EFCA18;
  --primary-pressed: #DDB90C;
  --primary-border: #7E6500;
  --secondary-bg: #FFFFFF;
  --secondary-fg: #161D36;
  --secondary-border: #68728D;
  --secondary-hover: #E9F9FB;
  --secondary-pressed: #D0F0F6;
  --disabled-bg: #E2E5EF;
  --disabled-fg: #5A6377;
  --disabled-border: #B7C0D4;
  --success-fg: #17633B;
  --success-bg: #E8F5ED;
  --warning-fg: #754C00;
  --warning-bg: #FFF4D5;
  --error-fg: #A52834;
  --error-bg: #FDECEF;
  --info-fg: #135A8D;
  --info-bg: #EAF4FF;
}

[data-palette="commodo"][data-mode="dark"] {
  --logo-primary: #FBD424;
  --logo-secondary: #03E1F9;
  --page: #100B28;
  --surface: #1D1737;
  --surface-raised: #2C254A;
  --text: #FAF8FF;
  --text-muted: #C9C2E0;
  --border-subtle: #8A80A8;
  --border-control: #9F96BB;
  --focus-ring: #03E1F9;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-gap-surface: #100B28;
  --support-violet: #5C4385;
  --support-deep-sea: #086D7E;
  --support-lilac: #E8E1F4;
  --support-cyan-mist: #DAF9FD;
  --support-soft-yellow: #FFF7CF;
  --primary-bg: #FBD424;
  --primary-fg: #161D36;
  --primary-hover: #FFE36B;
  --primary-pressed: #E2BF17;
  --primary-border: #FBD424;
  --secondary-bg: #1D1737;
  --secondary-fg: #FAF8FF;
  --secondary-border: #9F96BB;
  --secondary-hover: #2B2648;
  --secondary-pressed: #3A325C;
  --disabled-bg: #342D4D;
  --disabled-fg: #B5ACC9;
  --disabled-border: #8A80A8;
  --success-fg: #9ADBB0;
  --success-bg: #143B28;
  --warning-fg: #FFD889;
  --warning-bg: #46371A;
  --error-fg: #FFB5BC;
  --error-bg: #4A202B;
  --info-fg: #9ACAF5;
  --info-bg: #153754;
}

/* Reference components: connect these classes to real semantic HTML. */
.ui-button { border: 1.5px solid; border-radius: 0.65rem; padding: 0.75rem 1rem; font: inherit; font-weight: 600; }
.ui-button--primary { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-border); }
.ui-button--primary:hover:not(:disabled) { background: var(--primary-hover); }
.ui-button--primary:active:not(:disabled) { background: var(--primary-pressed); }
.ui-button--secondary { background: var(--secondary-bg); color: var(--secondary-fg); border-color: var(--secondary-border); }
.ui-button--secondary:hover:not(:disabled) { background: var(--secondary-hover); }
.ui-button--secondary:active:not(:disabled) { background: var(--secondary-pressed); }
.ui-button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ui-button:disabled { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--disabled-border); opacity: 1; cursor: not-allowed; }
.ui-field { background: var(--surface); color: var(--text); border: 1.5px solid var(--border-control); }
.ui-field::placeholder { color: var(--text-muted); opacity: 1; }
.ui-field:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ui-status--success { background: var(--success-bg); color: var(--success-fg); }
.ui-status--warning { background: var(--warning-bg); color: var(--warning-fg); }
.ui-status--error { background: var(--error-bg); color: var(--error-fg); }
.ui-status--info { background: var(--info-bg); color: var(--info-fg); }
/* Include text and an icon in status components; color cannot be the only signal. */
/* --border-subtle is decorative. Use --border-control for meaningful control edges. */
/* outline-offset leaves a transparent gap: the local surface shows through. */
/* --focus-gap-surface records the reference page surface; it does not paint that gap. */
/* Verify focus ring adjacency and clipping on every actual local surface. */