/* Eira theme contract
 * Graphite-Monochrome_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: Hardware Diagnostics.
 * Palette anchor / Light frame color: #737A80 (`--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.
 *
 * Graphite Monochrome reference theme: #ECEFF1 is the central Light-mode device surface.
 */

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

  /* Surfaces */
  --eira-page-bg: #FAFAFA;
  --eira-surface: #FFFFFF;
  --eira-surface-alt: #F3F4F5;
  --eira-surface-border: #D9DDE0;
  --eira-input-bg: #FFFFFF;
  --eira-input-border: #7B8288;
  --eira-input-active-bg: #FAFAFA;
  --eira-input-active-border: #6B7278;

  /* Text */
  --eira-text-primary: #25282B;
  --eira-text-secondary: #5D6267;
  --eira-text-muted: #70767B;
  --eira-text-placeholder: #969CA1;
  --eira-inverse: #FFFFFF;

  /* Brand / navigation / icons */
  --eira-primary: #ECEFF1;
  --eira-primary-dark: #686F75;
  --eira-primary-hover: #E1E4E6;
  --eira-primary-light: #F5F6F7;
  --eira-primary-darkmode: #C9CED2;
  --eira-primary-soft: #F7F8F8;
  --eira-nav-accent: #555C62;
  --eira-nav-accent-hover: #474E54;
  --eira-icon-accent: #6A7177;
  --eira-outline-action: #5D646A;
  --eira-outline-action-hover: #4B5258;

  /* Device fields: visual focal point */
  --eira-device-field-bg: #ECEFF1;
  --eira-device-field-border: #737A80;

  /* Primary actions: Connect / Reconnect / Pair / Pairing */
  --eira-connect-bg: #ECEFF1;
  --eira-connect-border: #737A80;
  --eira-connect-text: #25282B;
  --eira-connect-hover-bg: #E1E4E6;

  /* Secondary actions: Disconnect and neutral filled controls */
  --eira-disconnect-bg: #F0F1F2;
  --eira-disconnect-border: #8A9095;
  --eira-disconnect-text: #555B60;
  --eira-disconnect-hover-bg: #E5E7E9;

  /* Sliders, switches, selected control accents */
  --eira-control-accent: #666D73;
  --eira-control-accent-hover: #585F65;
  --eira-control-accent-text: #25282B;
  --eira-range-thumb: #666D73;
  --eira-range-thumb-active: #585F65;

  /* Outline / secondary Pico controls */
  --eira-secondary: #6C7277;
  --eira-secondary-bg: #F0F1F2;
  --eira-secondary-border: #8A9095;
  --eira-secondary-hover: #565C61;
  --eira-secondary-hover-bg: #E5E7E9;
  --eira-secondary-hover-border: #AEB3B7;
  --eira-secondary-text: #555B60;

  /* 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: #646A6F;
  --eira-neutral-bg: #F0F1F2;
  --eira-neutral-ring: #D5D8DB;

  /* Soft badges / hints */
  --eira-badge-soft-bg: #F2F3F4;
  --eira-badge-soft-text: #555C62;

  /* Focus, selection, shadows */
  --eira-focus: #737A80;
  --eira-selection-bg: #ECEFF1;
  --eira-primary-focus-bg: rgba(115, 122, 128, 0.28);
  --eira-primary-focus-bg-dark: rgba(201, 206, 210, 0.34);
  --eira-primary-underline-bg: rgba(106, 113, 119, 0.46);
  --eira-primary-underline-bg-dark: rgba(201, 206, 210, 0.52);
  --eira-shadow: rgba(37, 40, 43, 0.14);
  --eira-card-shadow: 0 0.125rem 0.5rem rgba(37, 40, 43, 0.08);
  --eira-dropdown-shadow: 0 0.5rem 1rem rgba(37, 40, 43, 0.12);
  --eira-modal-overlay: rgba(37, 40, 43, 0.28);
  --eira-switch-thumb-shadow: 0 0 0 rgba(37, 40, 43, 0);

  /* Miscellaneous themed surfaces */
  --eira-progress-bg: #E7E9EB;
  --eira-dropdown-bg: #FFFFFF;
  --eira-dropdown-border: #7B8288;
  --eira-dropdown-hover-bg: #F5F6F7;
  --eira-tooltip-bg: #34383C;
  --eira-tooltip-text: #FFFFFF;
  --eira-code-bg: #F0F2F3;
  --eira-code-text: #34383C;
  --eira-table-border: #D9DDE0;
  --eira-table-stripe: #F7F8F8;
  --eira-mark-bg: #FBF4E7;
  --eira-mark-text: #6D5637;
  --eira-browser-theme-color: #F3F4F5;
}

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

  --eira-page-bg: #111315;
  --eira-surface: #1B1E21;
  --eira-surface-alt: #23272A;
  --eira-surface-border: #3A4045;
  --eira-input-bg: #1B1E21;
  --eira-input-border: #50575D;
  --eira-input-active-bg: #23272A;
  --eira-input-active-border: #BFC5C9;

  --eira-text-primary: #F1F3F4;
  --eira-text-secondary: #CDD1D4;
  --eira-text-muted: #A1A7AC;
  --eira-text-placeholder: #8C9398;
  --eira-inverse: #111315;

  --eira-primary: #363C41;
  --eira-primary-dark: #C9CED2;
  --eira-primary-hover: #42494F;
  --eira-primary-light: #DEE2E5;
  --eira-primary-darkmode: #C9CED2;
  --eira-primary-soft: #2D3236;
  --eira-nav-accent: #D2D6D9;
  --eira-nav-accent-hover: #ECEEEF;
  --eira-icon-accent: #D2D6D9;
  --eira-outline-action: #D5D9DC;
  --eira-outline-action-hover: #F1F3F4;

  --eira-device-field-bg: #30353A;
  --eira-device-field-border: #C9CED2;

  --eira-connect-bg: #393F44;
  --eira-connect-border: #BFC5C9;
  --eira-connect-text: #F7F8F8;
  --eira-connect-hover-bg: #42494F;

  --eira-disconnect-bg: #33373B;
  --eira-disconnect-border: #697077;
  --eira-disconnect-text: #E6E8E9;
  --eira-disconnect-hover-bg: #3E4347;

  --eira-control-accent: #BFC5C9;
  --eira-control-accent-hover: #D2D6D9;
  --eira-control-accent-text: #111315;
  --eira-range-thumb: #BFC5C9;
  --eira-range-thumb-active: #D2D6D9;

  --eira-secondary: #B4B9BD;
  --eira-secondary-bg: #33373B;
  --eira-secondary-border: #697077;
  --eira-secondary-hover: #E0E3E5;
  --eira-secondary-hover-bg: #3E4347;
  --eira-secondary-hover-border: #858C91;
  --eira-secondary-text: #E6E8E9;

  --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: #B4B9BD;
  --eira-neutral-bg: #2C3034;
  --eira-neutral-ring: #4D5358;

  --eira-badge-soft-bg: #2D3236;
  --eira-badge-soft-text: #DEE2E5;

  --eira-focus: #C9CED2;
  --eira-selection-bg: #393F44;
  --eira-primary-focus-bg: rgba(201, 206, 210, 0.34);
  --eira-primary-focus-bg-dark: rgba(201, 206, 210, 0.34);
  --eira-primary-underline-bg: rgba(201, 206, 210, 0.52);
  --eira-primary-underline-bg-dark: rgba(201, 206, 210, 0.52);
  --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: #2E3337;
  --eira-dropdown-bg: #23272A;
  --eira-dropdown-border: #4A5055;
  --eira-dropdown-hover-bg: #2D3236;
  --eira-tooltip-bg: #F1F3F4;
  --eira-tooltip-text: #111315;
  --eira-code-bg: #272B2F;
  --eira-code-text: #E4E7E9;
  --eira-table-border: #3A4045;
  --eira-table-stripe: #202326;
  --eira-mark-bg: #3A3124;
  --eira-mark-text: #F2DBB3;
  --eira-browser-theme-color: #111315;
}

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