/* Eira theme contract
 * Nordic-Stone_Earth_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: Network and App Settings.
 * Palette anchor / Light frame color: #A18473 (`--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.
 *
 * Nordic Stone reference theme: #F1E7E0 is the central Light-mode device surface.
 */

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

  /* Surfaces */
  --eira-page-bg: #FDFBF9;
  --eira-surface: #FFFFFF;
  --eira-surface-alt: #F8F4F1;
  --eira-surface-border: #E8DDD6;
  --eira-input-bg: #FFFFFF;
  --eira-input-border: #8A766A;
  --eira-input-active-bg: #FDFBF9;
  --eira-input-active-border: #A18473;

  /* Text */
  --eira-text-primary: #3A312D;
  --eira-text-secondary: #6F625B;
  --eira-text-muted: #7E7069;
  --eira-text-placeholder: #74665E;
  --eira-inverse: #FFFFFF;

  /* Brand / navigation / icons */
  --eira-primary: #F1E8E2;
  --eira-primary-dark: #A18473;
  --eira-primary-hover: #EADDD5;
  --eira-primary-light: #F8F1EC;
  --eira-primary-darkmode: #D8BFB0;
  --eira-primary-soft: #FAF6F3;
  --eira-nav-accent: #786358;
  --eira-nav-accent-hover: #6B584F;
  --eira-icon-accent: #9B7D6C;
  --eira-outline-action: #735F55;
  --eira-outline-action-hover: #665249;

  /* Device fields: visual focal point */
  --eira-device-field-bg: #F1E7E0;
  --eira-device-field-border: #A18473;

  /* Primary actions: Connect / Reconnect / Pair / Pairing */
  --eira-connect-bg: #F1E8E2;
  --eira-connect-border: #A18473;
  --eira-connect-text: #3A312D;
  --eira-connect-hover-bg: #EADDD5;

  /* Secondary actions: Disconnect and neutral filled controls */
  --eira-disconnect-bg: #F2EEEB;
  --eira-disconnect-border: #918178;
  --eira-disconnect-text: #695D57;
  --eira-disconnect-hover-bg: #E8E1DC;

  /* Sliders, switches, selected control accents */
  --eira-control-accent: #9B7D6C;
  --eira-control-accent-hover: #8E705F;
  --eira-control-accent-text: #3A312D;
  --eira-range-thumb: #9B7D6C;
  --eira-range-thumb-active: #8E705F;

  /* Outline / secondary Pico controls */
  --eira-secondary: #796D67;
  --eira-secondary-bg: #F2EEEB;
  --eira-secondary-border: #918178;
  --eira-secondary-hover: #675C56;
  --eira-secondary-hover-bg: #E8E1DC;
  --eira-secondary-hover-border: #B8AAA2;
  --eira-secondary-text: #695D57;

  /* Semantic status colours: deliberately pastel, but still distinct */
  --eira-success: #467666;
  --eira-success-bg: #E6F3EE;
  --eira-success-ring: #BFDCCF;
  --eira-warning: #83663A;
  --eira-warning-text: #80643B;
  --eira-warning-bg: #FBF4E7;
  --eira-warning-border: #DEC89E;
  --eira-warning-status-bg: #F6EBD6;
  --eira-warning-ring: #E8D7B7;
  --eira-error: #B04D60;
  --eira-error-hover: #AE5E6E;
  --eira-error-bg: #FAEDF0;
  --eira-error-border: #E5B9C1;
  --eira-error-status-bg: #F4DDE2;
  --eira-error-status-bg-soft: #F9E9EC;
  --eira-error-ring: #EBC8CE;
  --eira-neutral: #766A64;
  --eira-neutral-bg: #F2EEEB;
  --eira-neutral-ring: #DED5CF;

  /* Soft badges / hints */
  --eira-badge-soft-bg: #F8F1EC;
  --eira-badge-soft-text: #776057;

  /* Focus, selection, shadows */
  --eira-focus: #A18473;
  --eira-selection-bg: #F1E8E2;
  --eira-primary-focus-bg: rgba(194, 157, 136, 0.34);
  --eira-primary-focus-bg-dark: rgba(216, 191, 176, 0.36);
  --eira-primary-underline-bg: rgba(155, 125, 108, 0.46);
  --eira-primary-underline-bg-dark: rgba(216, 191, 176, 0.54);
  --eira-shadow: rgba(58, 49, 45, 0.14);
  --eira-card-shadow: 0 0.125rem 0.5rem rgba(103, 81, 70, 0.08);
  --eira-dropdown-shadow: 0 0.5rem 1rem rgba(103, 81, 70, 0.12);
  --eira-modal-overlay: rgba(58, 49, 45, 0.26);
  --eira-switch-thumb-shadow: 0 0 0 rgba(33, 51, 70, 0);

  /* Miscellaneous themed surfaces */
  --eira-progress-bg: #EEE9E5;
  --eira-dropdown-bg: #FFFFFF;
  --eira-dropdown-border: #8A766A;
  --eira-dropdown-hover-bg: #FAF6F3;
  --eira-tooltip-bg: #5D4E47;
  --eira-tooltip-text: #FFFFFF;
  --eira-code-bg: #F6F1EE;
  --eira-code-text: #5D4E47;
  --eira-table-border: #E8DDD6;
  --eira-table-stripe: #FBF8F6;
  --eira-mark-bg: #FBF4E7;
  --eira-mark-text: #6D5637;
  --eira-browser-theme-color: #F8F4F1;
}

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

  --eira-page-bg: #1A1716;
  --eira-surface: #27211E;
  --eira-surface-alt: #302824;
  --eira-surface-border: #4B3E38;
  --eira-input-bg: #27211E;
  --eira-input-border: #7B6A63;
  --eira-input-active-bg: #302824;
  --eira-input-active-border: #D1B19F;

  --eira-text-primary: #F7F1ED;
  --eira-text-secondary: #DED0C8;
  --eira-text-muted: #B2A39B;
  --eira-text-placeholder: #C0AFA7;
  --eira-inverse: #1A1716;

  --eira-primary: #5B463C;
  --eira-primary-dark: #D8BFB0;
  --eira-primary-hover: #6B5145;
  --eira-primary-light: #ECD8CC;
  --eira-primary-darkmode: #D8BFB0;
  --eira-primary-soft: #4C3A32;
  --eira-nav-accent: #D8BFB0;
  --eira-nav-accent-hover: #ECD8CC;
  --eira-icon-accent: #D8BFB0;
  --eira-outline-action: #E5CFC2;
  --eira-outline-action-hover: #F1E2DA;

  --eira-device-field-bg: #533F36;
  --eira-device-field-border: #D8BFB0;

  --eira-connect-bg: #60493E;
  --eira-connect-border: #D1B19F;
  --eira-connect-text: #FFF9F5;
  --eira-connect-hover-bg: #6B5145;

  --eira-disconnect-bg: #403936;
  --eira-disconnect-border: #7B6C65;
  --eira-disconnect-text: #EEE6E2;
  --eira-disconnect-hover-bg: #4B433F;

  --eira-control-accent: #D1B19F;
  --eira-control-accent-hover: #D8BFB0;
  --eira-control-accent-text: #1A1716;
  --eira-range-thumb: #D1B19F;
  --eira-range-thumb-active: #D8BFB0;

  --eira-secondary: #C4B6AE;
  --eira-secondary-bg: #403936;
  --eira-secondary-border: #7B6C65;
  --eira-secondary-hover: #E8DDD7;
  --eira-secondary-hover-bg: #4B433F;
  --eira-secondary-hover-border: #918178;
  --eira-secondary-text: #EEE6E2;

  --eira-success: #9CCDBB;
  --eira-success-bg: #223831;
  --eira-success-ring: #375A4E;
  --eira-warning: #E1C28C;
  --eira-warning-text: #F2DBB3;
  --eira-warning-bg: #3A3124;
  --eira-warning-border: #806B49;
  --eira-warning-status-bg: #3A3124;
  --eira-warning-ring: #5C4D36;
  --eira-error: #E3A0AB;
  --eira-error-hover: #F0B7C0;
  --eira-error-bg: #3B272D;
  --eira-error-border: #815761;
  --eira-error-status-bg: #3B272D;
  --eira-error-status-bg-soft: #332329;
  --eira-error-ring: #5D3B44;
  --eira-neutral: #C4B6AE;
  --eira-neutral-bg: #37312E;
  --eira-neutral-ring: #5F554F;

  --eira-badge-soft-bg: #4C3A32;
  --eira-badge-soft-text: #ECD8CC;

  --eira-focus: #D8BFB0;
  --eira-selection-bg: #60493E;
  --eira-primary-focus-bg: rgba(216, 191, 176, 0.36);
  --eira-primary-focus-bg-dark: rgba(216, 191, 176, 0.36);
  --eira-primary-underline-bg: rgba(216, 191, 176, 0.54);
  --eira-primary-underline-bg-dark: rgba(216, 191, 176, 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: #3D3531;
  --eira-dropdown-bg: #302824;
  --eira-dropdown-border: #594A43;
  --eira-dropdown-hover-bg: #4C3A32;
  --eira-tooltip-bg: #F7F1ED;
  --eira-tooltip-text: #1A1716;
  --eira-code-bg: #332B27;
  --eira-code-text: #EDE3DE;
  --eira-table-border: #4B3E38;
  --eira-table-stripe: #2B2421;
  --eira-mark-bg: #3A3124;
  --eira-mark-text: #F2DBB3;
  --eira-browser-theme-color: #1A1716;
}

/* ---- 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;
}