/* Eira theme contract
 * Glacier-Aqua_Luminous_WCAGlikely
 * ALL application colours live in this file. Component/layout CSS must not contain
 * palette values. Future themes (including AI-generated themes) should keep these
 * variable names and replace only the values in the Light and Dark sections.
 *
 * Page assignment: Audio Routing.
 * Palette anchor / Light frame color: #69B2B8 (`--eira-device-field-border`).
 * Derivation rule: when changing this anchor, re-derive the related non-semantic
 * Light and Dark palette values from it while preserving the established brightness,
 * contrast hierarchy, semantic token roles, and Pico bridge. Do not derive
 * success/warning/error status colors from the page anchor. Re-check contrast after
 * every palette adjustment; the palette name is not a formal WCAG conformance claim.
 *
 * Glacier Aqua reference theme: #D5F2F4 is the central Light-mode device surface.
 */

/* ---- Light theme --------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --eira-page-bg: #FBFEFE;
  --eira-surface: #FFFFFF;
  --eira-surface-alt: #F2FBFC;
  --eira-surface-border: #D8EEF0;
  --eira-input-bg: #FFFFFF;
  --eira-input-border: #648B8F;
  --eira-input-active-bg: #FBFEFE;
  --eira-input-active-border: #4B9399;

  /* Text */
  --eira-text-primary: #22383A;
  --eira-text-secondary: #566F72;
  --eira-text-muted: #667D80;
  --eira-text-placeholder: #637A7D;
  --eira-inverse: #FFFFFF;

  /* Brand / navigation / icons */
  --eira-primary: #DFF7F8;
  --eira-primary-dark: #5AA4AA;
  --eira-primary-hover: #CDEFF1;
  --eira-primary-light: #ECFBFC;
  --eira-primary-darkmode: #A9E5E9;
  --eira-primary-soft: #F3FCFD;
  --eira-nav-accent: #3F787C;
  --eira-nav-accent-hover: #376F73;
  --eira-icon-accent: #549CA2;
  --eira-outline-action: #55797D;
  --eira-outline-action-hover: #486E73;

  /* Device fields: visual focal point */
  --eira-device-field-bg: #D5F2F4;
  --eira-device-field-border: #69B2B8;

  /* Primary actions: Connect / Reconnect / Pair / Pairing */
  --eira-connect-bg: #DFF7F8;
  --eira-connect-border: #4B9399;
  --eira-connect-text: #22383A;
  --eira-connect-hover-bg: #CDEFF1;

  /* Secondary actions: Disconnect and neutral filled controls */
  --eira-disconnect-bg: #EEF4F5;
  --eira-disconnect-border: #719195;
  --eira-disconnect-text: #50666A;
  --eira-disconnect-hover-bg: #E3ECEE;

  /* Sliders, switches, selected control accents */
  --eira-control-accent: #4B9399;
  --eira-control-accent-hover: #438B91;
  --eira-control-accent-text: #101A1B;
  --eira-range-thumb: #4B9399;
  --eira-range-thumb-active: #438B91;

  /* Outline / secondary Pico controls */
  --eira-secondary: #687F82;
  --eira-secondary-bg: #EEF4F5;
  --eira-secondary-border: #739397;
  --eira-secondary-hover: #526A6D;
  --eira-secondary-hover-bg: #E3ECEE;
  --eira-secondary-hover-border: #A1B8BA;
  --eira-secondary-text: #50666A;

  /* Semantic status colours: deliberately pastel, but still distinct */
  --eira-success: #487665;
  --eira-success-bg: #E7F3EE;
  --eira-success-ring: #C2DED3;
  --eira-warning: #82663B;
  --eira-warning-text: #806940;
  --eira-warning-bg: #FBF5E9;
  --eira-warning-border: #DECBA5;
  --eira-warning-status-bg: #F6EDD9;
  --eira-warning-ring: #E8DABD;
  --eira-error: #B04D5F;
  --eira-error-hover: #AE6372;
  --eira-error-bg: #FAEFF1;
  --eira-error-border: #E5BDC4;
  --eira-error-status-bg: #F4E0E4;
  --eira-error-status-bg-soft: #F9EBED;
  --eira-error-ring: #EBCBD1;
  --eira-neutral: #607578;
  --eira-neutral-bg: #EEF4F5;
  --eira-neutral-ring: #D1DDDF;

  /* Soft badges / hints */
  --eira-badge-soft-bg: #ECFBFC;
  --eira-badge-soft-text: #41777B;

  /* Focus, selection, shadows */
  --eira-focus: #4B9399;
  --eira-selection-bg: #DFF7F8;
  --eira-primary-focus-bg: rgba(105, 178, 184, 0.34);
  --eira-primary-focus-bg-dark: rgba(169, 229, 233, 0.36);
  --eira-primary-underline-bg: rgba(99, 171, 176, 0.46);
  --eira-primary-underline-bg-dark: rgba(169, 229, 233, 0.54);
  --eira-shadow: rgba(34, 56, 58, 0.14);
  --eira-card-shadow: 0 0.125rem 0.5rem rgba(58, 98, 102, 0.08);
  --eira-dropdown-shadow: 0 0.5rem 1rem rgba(58, 98, 102, 0.12);
  --eira-modal-overlay: rgba(34, 56, 58, 0.26);
  --eira-switch-thumb-shadow: 0 0 0 rgba(34, 56, 58, 0);

  /* Miscellaneous themed surfaces */
  --eira-progress-bg: #E6EFF0;
  --eira-dropdown-bg: #FFFFFF;
  --eira-dropdown-border: #5D999E;
  --eira-dropdown-hover-bg: #F3FCFD;
  --eira-tooltip-bg: #3F5B5E;
  --eira-tooltip-text: #FFFFFF;
  --eira-code-bg: #EFF7F8;
  --eira-code-text: #3F5B5E;
  --eira-table-border: #D8EEF0;
  --eira-table-stripe: #F7FCFC;
  --eira-mark-bg: #FBF5E9;
  --eira-mark-text: #6D583A;
  --eira-browser-theme-color: #F2FBFC;
}

/* ---- Dark theme ---------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --eira-page-bg: #101A1B;
  --eira-surface: #172628;
  --eira-surface-alt: #1D2F31;
  --eira-surface-border: #304A4D;
  --eira-input-bg: #172628;
  --eira-input-border: #435E61;
  --eira-input-active-bg: #1D2F31;
  --eira-input-active-border: #93DCE1;

  --eira-text-primary: #EDF8F9;
  --eira-text-secondary: #CBDCDF;
  --eira-text-muted: #98ACAF;
  --eira-text-placeholder: #869B9E;
  --eira-inverse: #101A1B;

  --eira-primary: #2C5256;
  --eira-primary-dark: #A9E5E9;
  --eira-primary-hover: #346166;
  --eira-primary-light: #CAF1F3;
  --eira-primary-darkmode: #A9E5E9;
  --eira-primary-soft: #234548;
  --eira-nav-accent: #A9E5E9;
  --eira-nav-accent-hover: #CAF1F3;
  --eira-icon-accent: #A9E5E9;
  --eira-outline-action: #BAE7EA;
  --eira-outline-action-hover: #D9F5F6;

  --eira-device-field-bg: #294D51;
  --eira-device-field-border: #A9E5E9;

  --eira-connect-bg: #2E5559;
  --eira-connect-border: #93DCE1;
  --eira-connect-text: #F4FCFC;
  --eira-connect-hover-bg: #346166;

  --eira-disconnect-bg: #313F41;
  --eira-disconnect-border: #647A7D;
  --eira-disconnect-text: #E4EEEF;
  --eira-disconnect-hover-bg: #3C4B4D;

  --eira-control-accent: #93DCE1;
  --eira-control-accent-hover: #A9E5E9;
  --eira-control-accent-text: #101A1B;
  --eira-range-thumb: #93DCE1;
  --eira-range-thumb-active: #A9E5E9;

  --eira-secondary: #ACC0C2;
  --eira-secondary-bg: #313F41;
  --eira-secondary-border: #647A7D;
  --eira-secondary-hover: #D7E6E7;
  --eira-secondary-hover-bg: #3C4B4D;
  --eira-secondary-hover-border: #7C9396;
  --eira-secondary-text: #E4EEEF;

  --eira-success: #9CCDBA;
  --eira-success-bg: #223A31;
  --eira-success-ring: #375B4D;
  --eira-warning: #E1C68F;
  --eira-warning-text: #F2DDB6;
  --eira-warning-bg: #3A3225;
  --eira-warning-border: #806E4B;
  --eira-warning-status-bg: #3A3225;
  --eira-warning-ring: #5C4F37;
  --eira-error: #E3A4AE;
  --eira-error-hover: #F0BBC2;
  --eira-error-bg: #3B292E;
  --eira-error-border: #815A63;
  --eira-error-status-bg: #3B292E;
  --eira-error-status-bg-soft: #33252A;
  --eira-error-ring: #5D3D45;
  --eira-neutral: #ACC0C2;
  --eira-neutral-bg: #2A393B;
  --eira-neutral-ring: #4B5E61;

  --eira-badge-soft-bg: #234548;
  --eira-badge-soft-text: #CAF1F3;

  --eira-focus: #A9E5E9;
  --eira-selection-bg: #2E5559;
  --eira-primary-focus-bg: rgba(169, 229, 233, 0.36);
  --eira-primary-focus-bg-dark: rgba(169, 229, 233, 0.36);
  --eira-primary-underline-bg: rgba(169, 229, 233, 0.54);
  --eira-primary-underline-bg-dark: rgba(169, 229, 233, 0.54);
  --eira-shadow: rgba(0, 0, 0, 0.32);
  --eira-card-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.20);
  --eira-dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.30);
  --eira-modal-overlay: rgba(0, 0, 0, 0.56);
  --eira-switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);

  --eira-progress-bg: #2A3F41;
  --eira-dropdown-bg: #1D2F31;
  --eira-dropdown-border: #3C575A;
  --eira-dropdown-hover-bg: #234548;
  --eira-tooltip-bg: #EDF8F9;
  --eira-tooltip-text: #101A1B;
  --eira-code-bg: #213638;
  --eira-code-text: #DDEBEC;
  --eira-table-border: #304A4D;
  --eira-table-stripe: #1A2B2D;
  --eira-mark-bg: #3A3225;
  --eira-mark-text: #F2DDB6;
  --eira-browser-theme-color: #101A1B;
}

/* ---- Pico colour bridge --------------------------------------------------
 * Pico remains the component foundation, but every colour it exposes to Eira is
 * mapped back to semantic theme tokens above. This block is structural: theme
 * generators should normally change values above, not these mappings. */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --pico-background-color: var(--eira-page-bg);
  --pico-color: var(--eira-text-primary);
  --pico-text-selection-color: var(--eira-selection-bg);
  --pico-muted-color: var(--eira-text-muted);
  --pico-muted-border-color: var(--eira-surface-border);

  --pico-primary: var(--eira-outline-action);
  --pico-primary-background: var(--eira-connect-bg);
  --pico-primary-border: var(--eira-connect-border);
  --pico-primary-underline: var(--eira-primary-underline-bg);
  --pico-primary-hover: var(--eira-outline-action-hover);
  --pico-primary-hover-background: var(--eira-connect-hover-bg);
  --pico-primary-hover-border: var(--eira-connect-border);
  --pico-primary-hover-underline: var(--eira-outline-action-hover);
  --pico-primary-focus: var(--eira-primary-focus-bg);
  --pico-primary-inverse: var(--eira-connect-text);

  --pico-secondary: var(--eira-secondary);
  --pico-secondary-background: var(--eira-secondary-bg);
  --pico-secondary-border: var(--eira-secondary-border);
  --pico-secondary-underline: var(--eira-primary-underline-bg);
  --pico-secondary-hover: var(--eira-secondary-hover);
  --pico-secondary-hover-background: var(--eira-secondary-hover-bg);
  --pico-secondary-hover-border: var(--eira-secondary-hover-border);
  --pico-secondary-hover-underline: var(--eira-secondary-hover);
  --pico-secondary-focus: var(--eira-primary-focus-bg);
  --pico-secondary-inverse: var(--eira-secondary-text);

  --pico-contrast: var(--eira-text-primary);
  --pico-contrast-background: var(--eira-text-primary);
  --pico-contrast-border: var(--eira-text-primary);
  --pico-contrast-hover: var(--eira-text-secondary);
  --pico-contrast-hover-background: var(--eira-text-secondary);
  --pico-contrast-hover-border: var(--eira-text-secondary);
  --pico-contrast-focus: var(--eira-primary-focus-bg);
  --pico-contrast-inverse: var(--eira-inverse);

  --pico-h1-color: var(--eira-text-primary);
  --pico-h2-color: var(--eira-text-primary);
  --pico-h3-color: var(--eira-text-primary);
  --pico-h4-color: var(--eira-text-primary);
  --pico-h5-color: var(--eira-text-secondary);
  --pico-h6-color: var(--eira-text-secondary);

  --pico-card-background-color: var(--eira-surface);
  --pico-card-sectioning-background-color: var(--eira-surface-alt);
  --pico-card-border-color: var(--eira-surface-border);

  --pico-form-element-background-color: var(--eira-input-bg);
  --pico-form-element-selected-background-color: var(--eira-control-accent);
  --pico-form-element-border-color: var(--eira-input-border);
  --pico-form-element-color: var(--eira-text-primary);
  --pico-form-element-placeholder-color: var(--eira-text-placeholder);
  --pico-form-element-active-background-color: var(--eira-input-active-bg);
  --pico-form-element-active-border-color: var(--eira-input-active-border);
  --pico-form-element-focus-color: var(--eira-primary-focus-bg);
  --pico-form-element-valid-border-color: var(--eira-success);
  --pico-form-element-valid-active-border-color: var(--eira-success);
  --pico-form-element-valid-focus-color: var(--eira-success-ring);
  --pico-form-element-invalid-border-color: var(--eira-error);
  --pico-form-element-invalid-active-border-color: var(--eira-error);
  --pico-form-element-invalid-focus-color: var(--eira-error-ring);

  --pico-switch-background-color: var(--eira-neutral-bg);
  --pico-switch-checked-background-color: var(--eira-control-accent);
  --pico-switch-color: var(--eira-surface);
  --pico-range-border-color: var(--eira-progress-bg);
  --pico-range-active-border-color: var(--eira-control-accent);
  --pico-range-thumb-color: var(--eira-range-thumb);
  --pico-range-thumb-active-color: var(--eira-range-thumb-active);
  --pico-range-thumb-border-color: var(--eira-range-thumb);

  --pico-progress-background-color: var(--eira-progress-bg);
  --pico-progress-color: var(--eira-control-accent);

  --pico-dropdown-background-color: var(--eira-dropdown-bg);
  --pico-dropdown-border-color: var(--eira-dropdown-border);
  --pico-dropdown-color: var(--eira-text-primary);
  --pico-dropdown-hover-background-color: var(--eira-dropdown-hover-bg);

  --pico-tooltip-background-color: var(--eira-tooltip-bg);
  --pico-tooltip-color: var(--eira-tooltip-text);
  --pico-code-background-color: var(--eira-code-bg);
  --pico-code-color: var(--eira-code-text);
  --pico-code-kbd-background-color: var(--eira-text-primary);
  --pico-code-kbd-color: var(--eira-inverse);
  --pico-table-border-color: var(--eira-table-border);
  --pico-table-row-stripped-background-color: var(--eira-table-stripe);
  --pico-mark-background-color: var(--eira-mark-bg);
  --pico-mark-color: var(--eira-mark-text);
  --pico-ins-color: var(--eira-success);
  --pico-del-color: var(--eira-error);
  --pico-border-color: var(--eira-surface-border);
  --pico-blockquote-border-color: var(--eira-surface-border);
  --pico-blockquote-footer-color: var(--eira-text-muted);
  --pico-accordion-border-color: var(--eira-surface-border);
  --pico-accordion-active-summary-color: var(--eira-outline-action);
  --pico-accordion-open-summary-color: var(--eira-text-primary);
  --pico-accordion-close-summary-color: var(--eira-text-secondary);
  --pico-box-shadow: var(--eira-card-shadow);
  --pico-card-box-shadow: var(--eira-card-shadow);
  --pico-dropdown-box-shadow: var(--eira-dropdown-shadow);
  --pico-button-box-shadow: var(--eira-switch-thumb-shadow);
  --pico-button-hover-box-shadow: var(--eira-switch-thumb-shadow);
  --pico-switch-thumb-box-shadow: var(--eira-switch-thumb-shadow);
  --pico-modal-overlay-background-color: var(--eira-modal-overlay);

  --pico-border-radius: 0.5rem;
}