/* =============================================================================
 * spectrum-tokens.css  —  SMKK Spectrum-inspired Design Token System
 * -----------------------------------------------------------------------------
 * TOKENS ONLY. OPT-IN. DOES NOT RESTYLE EXISTING ELEMENTS.
 *
 * This file defines a centralized set of CSS custom properties (design tokens)
 * on :root, with dark-theme overrides under [data-theme="dark"],
 * html.smkk-readable-dark-theme (set by site.js for every scheme:"dark"
 * theme — midnight/shop-floor/high-contrast), and [data-theme="darkest"].
 * It declares NO selectors that target existing elements/tags. Linking this
 * file changes nothing visually on
 * its own — tokens are inert until consumed by an opt-in `spx-` component
 * class (see spectrum-components.css) or by a future migrated page.
 *
 * Design inspiration: Adobe Spectrum (structure / scale / token discipline).
 * NO Adobe branding, NO Adobe logos, NO Adobe Stock assets are used.
 *
 * COLLISION SAFETY: every token is prefixed `--smkk-spx-`. This prefix does
 * not appear anywhere else in the codebase (existing token families use
 * --app-*, --kk-*, --color-*, --dash-*, --installer-*, --inventory-*,
 * --arcade-*, --smkk-control-*, --smkk-dark-floor-*, etc.). Nothing here
 * overrides or shadows an existing variable.
 *
 * THEME: dark themes use dark neutral GRAYS, never pure black (#000), to keep
 * text legible and surfaces distinguishable.
 * ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
   * COLOR — Surfaces & Background (light / default theme)
   * ------------------------------------------------------------------------- */
  --smkk-spx-bg:                 #f5f6f8;  /* app canvas */
  --smkk-spx-surface:            #ffffff;  /* default card / panel surface */
  --smkk-spx-surface-elevated:   #ffffff;  /* raised surface (modals, popovers) */
  --smkk-spx-surface-subtle:     #eef0f3;  /* recessed / subtle fills, table stripes */
  --smkk-spx-surface-hover:      #e8ebef;  /* hover wash on neutral surfaces */

  /* Text */
  --smkk-spx-text:               #1f2329;  /* default body text */
  --smkk-spx-text-strong:        #0d1014;  /* headings / emphasis */
  --smkk-spx-text-muted:         #5a626d;  /* secondary / supporting text */
  --smkk-spx-text-on-accent:     #ffffff;  /* text on a filled accent/danger/etc. */

  /* Border */
  --smkk-spx-border:             #d4d8de;  /* default hairline border */
  --smkk-spx-border-strong:      #b6bcc6;  /* emphasized border */

  /* ---------------------------------------------------------------------------
   * COLOR — Semantic / Status
   * Each status ships a base, hover, active, and a low-emphasis surface + text
   * so status can always be conveyed with TEXT + ICON, never color alone.
   * ------------------------------------------------------------------------- */
  --smkk-spx-primary:            #2563c9;
  --smkk-spx-primary-hover:      #1f55ad;
  --smkk-spx-primary-active:     #1a4790;
  --smkk-spx-primary-surface:    #e8f0fc;
  --smkk-spx-primary-text:       #194a9e;

  --smkk-spx-danger:             #c8372f;
  --smkk-spx-danger-hover:       #ad2f28;
  --smkk-spx-danger-active:      #922822;
  --smkk-spx-danger-surface:     #fdecea;
  --smkk-spx-danger-text:        #9c2a23;

  --smkk-spx-warning:            #c77a16;
  --smkk-spx-warning-hover:      #ac6a12;
  --smkk-spx-warning-active:     #905910;
  --smkk-spx-warning-surface:    #fdf3e3;
  --smkk-spx-warning-text:       #8a560f;

  --smkk-spx-success:            #2f8f4e;
  --smkk-spx-success-hover:      #287c44;
  --smkk-spx-success-active:     #21683a;
  --smkk-spx-success-surface:    #e8f6ed;
  --smkk-spx-success-text:       #226b3a;

  --smkk-spx-info:               #2a7d9c;
  --smkk-spx-info-hover:         #246d88;
  --smkk-spx-info-active:        #1e5c73;
  --smkk-spx-info-surface:       #e6f3f8;
  --smkk-spx-info-text:          #1f5e76;

  /* Disabled */
  --smkk-spx-disabled-bg:        #e7e9ed;
  --smkk-spx-disabled-border:    #d4d8de;
  --smkk-spx-disabled-text:      #9aa1ab;

  /* Focus ring — high-contrast, always visible for keyboard users */
  --smkk-spx-focus-ring:         #2563c9;
  --smkk-spx-focus-ring-width:   2px;
  --smkk-spx-focus-ring-offset:  2px;

  /* ---------------------------------------------------------------------------
   * TYPOGRAPHY
   * Font families fall back to system fonts; vendored woff2 are a follow-up
   * (see docs/design/spectrum-integration-plan.md). Source Sans 3 /
   * Source Code Pro are the design targets but are NOT required to render.
   * ------------------------------------------------------------------------- */
  --smkk-spx-font-ui:   "Source Sans 3", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --smkk-spx-font-mono: "Source Code Pro", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Font sizes (type scale) */
  --smkk-spx-font-size-50:  0.6875rem; /* 11px — micro labels */
  --smkk-spx-font-size-75:  0.75rem;   /* 12px — captions */
  --smkk-spx-font-size-100: 0.875rem;  /* 14px — body / default UI */
  --smkk-spx-font-size-200: 1rem;      /* 16px — emphasized body */
  --smkk-spx-font-size-300: 1.125rem;  /* 18px — small heading */
  --smkk-spx-font-size-400: 1.375rem;  /* 22px — heading */
  --smkk-spx-font-size-500: 1.75rem;   /* 28px — large heading */
  --smkk-spx-font-size-600: 2.25rem;   /* 36px — display */

  /* Font weights */
  --smkk-spx-font-weight-regular:  400;
  --smkk-spx-font-weight-medium:   500;
  --smkk-spx-font-weight-semibold: 600;
  --smkk-spx-font-weight-bold:     700;

  /* Line heights */
  --smkk-spx-line-height-tight:   1.2;
  --smkk-spx-line-height-default: 1.45;
  --smkk-spx-line-height-loose:   1.6;

  /* ---------------------------------------------------------------------------
   * SPACING SCALE (4px base grid)
   * ------------------------------------------------------------------------- */
  --smkk-spx-space-50:  0.125rem; /* 2px */
  --smkk-spx-space-75:  0.25rem;  /* 4px */
  --smkk-spx-space-100: 0.5rem;   /* 8px */
  --smkk-spx-space-150: 0.75rem;  /* 12px */
  --smkk-spx-space-200: 1rem;     /* 16px */
  --smkk-spx-space-300: 1.5rem;   /* 24px */
  --smkk-spx-space-400: 2rem;     /* 32px */
  --smkk-spx-space-500: 2.5rem;   /* 40px */
  --smkk-spx-space-600: 3rem;     /* 48px */

  /* ---------------------------------------------------------------------------
   * RADIUS SCALE
   * ------------------------------------------------------------------------- */
  --smkk-spx-radius-50:   2px;
  --smkk-spx-radius-100:  4px;
  --smkk-spx-radius-200:  6px;
  --smkk-spx-radius-300:  8px;
  --smkk-spx-radius-400:  12px;
  --smkk-spx-radius-full: 9999px;

  /* ---------------------------------------------------------------------------
   * SHADOW / ELEVATION SCALE
   * ------------------------------------------------------------------------- */
  --smkk-spx-shadow-100: 0 1px 2px rgba(15, 18, 22, 0.08);
  --smkk-spx-shadow-200: 0 2px 6px rgba(15, 18, 22, 0.10);
  --smkk-spx-shadow-300: 0 6px 16px rgba(15, 18, 22, 0.14);
  --smkk-spx-shadow-400: 0 12px 32px rgba(15, 18, 22, 0.20);

  /* ---------------------------------------------------------------------------
   * COMPONENT SIZING
   * Touch targets are >= 44px at the medium/large sizes for accessibility.
   * ------------------------------------------------------------------------- */
  --smkk-spx-control-height-sm: 32px;
  --smkk-spx-control-height-md: 40px;
  --smkk-spx-control-height-lg: 48px;

  --smkk-spx-control-pad-x-sm:  0.625rem;
  --smkk-spx-control-pad-x-md:  0.875rem;
  --smkk-spx-control-pad-x-lg:  1.125rem;

  --smkk-spx-icon-size-sm: 16px;
  --smkk-spx-icon-size-md: 20px;
  --smkk-spx-icon-size-lg: 24px;

  --smkk-spx-border-width: 1px;
  --smkk-spx-touch-target-min: 44px;

  /* Layout chrome sizing (AppShell / Sidebar / TopBar) */
  --smkk-spx-sidebar-width:           240px;
  --smkk-spx-sidebar-width-collapsed: 64px;
  --smkk-spx-topbar-height:           56px;

  /* Motion */
  --smkk-spx-transition-fast: 120ms ease;
  --smkk-spx-transition-base: 180ms ease;
}

/* =============================================================================
 * DARK THEME  —  dark neutral grays (NOT pure black)
 * Opt in by setting data-theme="dark" on <html> or any ancestor of spx-
 * components. Only token VALUES are overridden here; no selectors target
 * existing elements.
 * ============================================================================= */
[data-theme="dark"],
html.smkk-readable-dark-theme {
  --smkk-spx-bg:               #1d2126;
  --smkk-spx-surface:          #262b32;
  --smkk-spx-surface-elevated: #2e343c;
  --smkk-spx-surface-subtle:   #21262c;
  --smkk-spx-surface-hover:    #323943;

  --smkk-spx-text:             #e7eaee;
  --smkk-spx-text-strong:      #f6f8fa;
  --smkk-spx-text-muted:       #a6adb8;
  --smkk-spx-text-on-accent:   #ffffff;

  --smkk-spx-border:           #3a414b;
  --smkk-spx-border-strong:    #4c5562;

  --smkk-spx-primary:          #4f8cf0;
  --smkk-spx-primary-hover:    #6699f2;
  --smkk-spx-primary-active:   #7da9f5;
  --smkk-spx-primary-surface:  #1f3454;
  --smkk-spx-primary-text:     #9ec0fa;

  --smkk-spx-danger:           #e2675f;
  --smkk-spx-danger-hover:     #e87d76;
  --smkk-spx-danger-active:    #ee948e;
  --smkk-spx-danger-surface:   #4a2421;
  --smkk-spx-danger-text:      #f2a7a2;

  --smkk-spx-warning:          #e0a04a;
  --smkk-spx-warning-hover:    #e6ad62;
  --smkk-spx-warning-active:   #ecba7b;
  --smkk-spx-warning-surface:  #423013;
  --smkk-spx-warning-text:     #efc488;

  --smkk-spx-success:          #57b873;
  --smkk-spx-success-hover:    #6cc285;
  --smkk-spx-success-active:   #84cd99;
  --smkk-spx-success-surface:  #1f3a28;
  --smkk-spx-success-text:     #93d3a6;

  --smkk-spx-info:             #4fa6c4;
  --smkk-spx-info-hover:       #65b3ce;
  --smkk-spx-info-active:      #7fc0d7;
  --smkk-spx-info-surface:     #1c3742;
  --smkk-spx-info-text:        #8fcadd;

  --smkk-spx-disabled-bg:      #2a2f36;
  --smkk-spx-disabled-border:  #3a414b;
  --smkk-spx-disabled-text:    #6b7480;

  --smkk-spx-focus-ring:       #6699f2;

  --smkk-spx-shadow-100: 0 1px 2px rgba(0, 0, 0, 0.40);
  --smkk-spx-shadow-200: 0 2px 6px rgba(0, 0, 0, 0.45);
  --smkk-spx-shadow-300: 0 6px 16px rgba(0, 0, 0, 0.50);
  --smkk-spx-shadow-400: 0 12px 32px rgba(0, 0, 0, 0.60);
}

/* =============================================================================
 * DARKEST THEME  —  deeper neutral grays for low-light / OLED preference.
 * Still NOT pure black; surfaces stay distinguishable and text stays legible.
 * ============================================================================= */
[data-theme="darkest"] {
  --smkk-spx-bg:               #121519;
  --smkk-spx-surface:          #1a1e23;
  --smkk-spx-surface-elevated: #22272d;
  --smkk-spx-surface-subtle:   #161a1e;
  --smkk-spx-surface-hover:    #262c33;

  --smkk-spx-text:             #e3e7ec;
  --smkk-spx-text-strong:      #f4f6f8;
  --smkk-spx-text-muted:       #99a1ac;
  --smkk-spx-text-on-accent:   #ffffff;

  --smkk-spx-border:           #2c333b;
  --smkk-spx-border-strong:    #3d4651;

  --smkk-spx-primary:          #4f8cf0;
  --smkk-spx-primary-hover:    #6699f2;
  --smkk-spx-primary-active:   #7da9f5;
  --smkk-spx-primary-surface:  #182a47;
  --smkk-spx-primary-text:     #9ec0fa;

  --smkk-spx-danger:           #e2675f;
  --smkk-spx-danger-hover:     #e87d76;
  --smkk-spx-danger-active:    #ee948e;
  --smkk-spx-danger-surface:   #401e1c;
  --smkk-spx-danger-text:      #f2a7a2;

  --smkk-spx-warning:          #e0a04a;
  --smkk-spx-warning-hover:    #e6ad62;
  --smkk-spx-warning-active:   #ecba7b;
  --smkk-spx-warning-surface:  #392a10;
  --smkk-spx-warning-text:     #efc488;

  --smkk-spx-success:          #57b873;
  --smkk-spx-success-hover:    #6cc285;
  --smkk-spx-success-active:   #84cd99;
  --smkk-spx-success-surface:  #193021;
  --smkk-spx-success-text:     #93d3a6;

  --smkk-spx-info:             #4fa6c4;
  --smkk-spx-info-hover:       #65b3ce;
  --smkk-spx-info-active:      #7fc0d7;
  --smkk-spx-info-surface:     #163039;
  --smkk-spx-info-text:        #8fcadd;

  --smkk-spx-disabled-bg:      #20252b;
  --smkk-spx-disabled-border:  #2c333b;
  --smkk-spx-disabled-text:    #636c78;

  --smkk-spx-focus-ring:       #6699f2;

  --smkk-spx-shadow-100: 0 1px 2px rgba(0, 0, 0, 0.55);
  --smkk-spx-shadow-200: 0 2px 6px rgba(0, 0, 0, 0.60);
  --smkk-spx-shadow-300: 0 6px 16px rgba(0, 0, 0, 0.65);
  --smkk-spx-shadow-400: 0 12px 32px rgba(0, 0, 0, 0.72);
}

/* =============================================================================
 * SCHEME FLOOR  —  fallback for any future/legacy saved theme key without its
 * own block, so a stale preference renders a scheme-correct (dark vs light)
 * page instead of white-on-white. A known per-theme block fully overrides this,
 * so the floor is never dead — it is the only thing between an unknown key and
 * the white-on-white bug. Cascade: :root (light default) -> scheme floor ->
 * html[data-smkk-theme] (authoritative palette below).
 * ============================================================================= */
html[data-smkk-scheme="dark"] {
  --smkk-spx-bg:               #1d2126;
  --smkk-spx-bg-2:             #181c20;
  --smkk-spx-surface:          #262b32;
  --smkk-spx-surface-2:        #21262c;
  --smkk-spx-surface-elevated: #2e343c;
  --smkk-spx-surface-subtle:   #21262c;
  --smkk-spx-surface-hover:    #323943;
  --smkk-spx-row-alt:          #21262c;
  --smkk-spx-text:             #e7eaee;
  --smkk-spx-text-strong:      #f6f8fa;
  --smkk-spx-text-muted:       #a6adb8;
  --smkk-spx-text-on-accent:   #0d0f0c;
  --smkk-spx-border:           #3a414b;
  --smkk-spx-border-strong:    #4c5562;
}

html[data-smkk-scheme="light"] {
  --smkk-spx-bg:               #f5f6f8;
  --smkk-spx-bg-2:             #eef0f3;
  --smkk-spx-surface:          #ffffff;
  --smkk-spx-surface-2:        #eef0f3;
  --smkk-spx-surface-elevated: #ffffff;
  --smkk-spx-surface-subtle:   #eef0f3;
  --smkk-spx-surface-hover:    #e8ebef;
  --smkk-spx-row-alt:          #eef0f3;
  --smkk-spx-text:             #1f2329;
  --smkk-spx-text-strong:      #0d1014;
  --smkk-spx-text-muted:       #5a626d;
  --smkk-spx-text-on-accent:   #ffffff;
  --smkk-spx-border:           #d4d8de;
  --smkk-spx-border-strong:    #b6bcc6;
}

/* =============================================================================
 * EYE-CARE ENVIRONMENT THEME PALETTES  ("SAVE THE EYES")
 * -----------------------------------------------------------------------------
 * Per-theme spx token blocks keyed off the SAME data-smkk-theme attribute the
 * runtime already writes (site.js applyTheme). These are AUTHORITATIVE per-theme
 * palettes; they are placed AFTER the shared html.smkk-readable-dark-theme floor
 * (and the :root light default) so a specific theme fully overrides the floor.
 *
 * Mapping — each of the 5 canonical theme keys carries one tuned environment
 * palette (docs/ux/themes/*.md), so saved prefs + theme-count tests stay intact:
 *   heritage      -> office-balanced  (calm balanced everyday light, dim/mid room)
 *   office-light  -> showroom-bright  (crisp bright high-ambient showroom light)
 *   shop-floor    -> shop-focused     (calm warm mid/dark amber, dim shop floor)
 *   midnight      -> night-dark       (true low-luminance low-blue night/dark room)
 *   high-contrast -> high-contrast    (max-contrast black/white/amber accessibility)
 *
 * Each block defines the FULL spx token contract INCLUDING the state tokens
 * (chip-selected bg+text, action-active, field-focus) per the spec hard-pairing
 * rule. Non-color tokens (type/space/radius/sizing/motion) stay invariant on
 * :root. Dark themes also override the shadow opacity stack.
 *
 * NOTE: light themes (heritage, office-light) intentionally do NOT carry the
 * smkk-readable-dark-theme class, so these blocks override the :root light
 * defaults directly with no regression to the dark guard.
 * ============================================================================= */

/* ----- HERITAGE  (Office Balanced — calm balanced light for a dim/mid office) ----- */
html[data-smkk-theme="heritage"] {
  --smkk-spx-bg:                 #eef1f4;
  --smkk-spx-bg-2:               #e4e8ed;
  --smkk-spx-surface:            #fbfcfd;
  --smkk-spx-surface-2:          #e4e8ed;
  --smkk-spx-surface-elevated:   #ffffff;
  --smkk-spx-surface-subtle:     #f3f6fb;
  --smkk-spx-surface-hover:      #e9eef4;
  --smkk-spx-row-alt:            #f3f6fb;

  --smkk-spx-text:               #23292f;
  --smkk-spx-text-strong:        #12161b;
  --smkk-spx-text-muted:         #5c646e;
  --smkk-spx-text-on-accent:     #ffffff;

  --smkk-spx-border:             #c4cad2;
  --smkk-spx-border-strong:      #79828f;

  --smkk-spx-action:             #2a5fa8;
  --smkk-spx-action-hover:       #234f8d;
  --smkk-spx-action-active:      #1d4275;
  --smkk-spx-action-text:        #ffffff;
  --smkk-spx-action-2:           #1f6336;
  --smkk-spx-action-2-text:      #ffffff;

  --smkk-spx-chip-bg:            #dde9f8;
  --smkk-spx-chip-text:          #1c4783;
  --smkk-spx-chip-border:        #b6c9e6;
  --smkk-spx-chip-selected-bg:   #bcd6f5;
  --smkk-spx-chip-selected-text: #0f2e5c;
  --smkk-spx-chip-selected-border: #1d4275;

  --smkk-spx-field-bg:           #ffffff;
  --smkk-spx-field-text:         #23292f;
  --smkk-spx-field-placeholder:  #5c646e;
  --smkk-spx-field-border:       #79828f;
  --smkk-spx-field-focus-bg:     #ffffff;
  --smkk-spx-field-focus-text:   #23292f;
  --smkk-spx-focus-ring:         #1f55a3;
  --smkk-spx-focus-ring-width:   2px;

  --smkk-spx-table-head-bg:      #d6e4f6;
  --smkk-spx-table-head-text:    #22405f;
  --smkk-spx-link:               #1f55a3;
  --smkk-spx-header-bg:          #fbfcfd;
  --smkk-spx-header-text:        #23292f;

  --smkk-spx-primary:            #2a5fa8;
  --smkk-spx-primary-hover:      #234f8d;
  --smkk-spx-primary-active:     #1d4275;
  --smkk-spx-primary-surface:    #e8f0fc;
  --smkk-spx-primary-text:       #1c4783;
  --smkk-spx-primary-text-on:    #ffffff;

  --smkk-spx-danger:             #b5332b;
  --smkk-spx-danger-surface:     #fbeae8;
  --smkk-spx-danger-text:        #9a2a23;
  --smkk-spx-danger-text-on:     #ffffff;

  --smkk-spx-warning:            #9a5f0d;
  --smkk-spx-warning-surface:    #fbf1df;
  --smkk-spx-warning-text:       #825009;
  --smkk-spx-warning-text-on:    #ffffff;

  --smkk-spx-success:            #23733f;
  --smkk-spx-success-surface:    #e6f4ea;
  --smkk-spx-success-text:       #1f6336;
  --smkk-spx-success-text-on:    #ffffff;

  --smkk-spx-info:               #256d88;
  --smkk-spx-info-surface:       #e3f0f6;
  --smkk-spx-info-text:          #1c586f;
  --smkk-spx-info-text-on:       #ffffff;

  --smkk-spx-disabled-bg:        #e3e6ea;
  --smkk-spx-disabled-border:    #c4cad2;
  --smkk-spx-disabled-text:      #8a929c;
}

/* ----- OFFICE-LIGHT  (Showroom Bright — crisp anti-glare daylight showroom) ----- */
html[data-smkk-theme="office-light"] {
  --smkk-spx-bg:                 #f7f9fc;
  --smkk-spx-bg-2:               #eaf0f9;
  --smkk-spx-surface:            #ffffff;
  --smkk-spx-surface-2:          #eef4fd;
  --smkk-spx-surface-elevated:   #ffffff;
  --smkk-spx-surface-subtle:     #f2f6fd;
  --smkk-spx-surface-hover:      #e8eff9;
  --smkk-spx-row-alt:            #f2f6fd;

  --smkk-spx-text:               #101a2b;
  --smkk-spx-text-strong:        #060c16;
  --smkk-spx-text-muted:         #4c5a70;
  --smkk-spx-text-on-accent:     #ffffff;

  --smkk-spx-border:             #bcc8da;
  --smkk-spx-border-strong:      #74819c;

  --smkk-spx-action:             #1b4f99;
  --smkk-spx-action-hover:       #16447f;
  --smkk-spx-action-active:      #123a6b;
  --smkk-spx-action-text:        #ffffff;
  --smkk-spx-action-2:           #127a69;
  --smkk-spx-action-2-text:      #ffffff;

  --smkk-spx-chip-bg:            #dfeafa;
  --smkk-spx-chip-text:          #16386b;
  --smkk-spx-chip-border:        #b6cdec;
  --smkk-spx-chip-selected-bg:   #1b4f99;
  --smkk-spx-chip-selected-text: #ffffff;
  --smkk-spx-chip-selected-border: #123a6b;

  --smkk-spx-field-bg:           #ffffff;
  --smkk-spx-field-text:         #101a2b;
  --smkk-spx-field-placeholder:  #5a6a82;
  --smkk-spx-field-border:       #74819c;
  --smkk-spx-field-focus-bg:     #ffffff;
  --smkk-spx-field-focus-text:   #101a2b;
  --smkk-spx-focus-ring:         #1b4f99;
  --smkk-spx-focus-ring-width:   2px;

  --smkk-spx-table-head-bg:      #d6e6fb;
  --smkk-spx-table-head-text:    #13243f;
  --smkk-spx-link:               #1b4f99;
  --smkk-spx-header-bg:          #ffffff;
  --smkk-spx-header-text:        #101a2b;

  --smkk-spx-primary:            #1b4f99;
  --smkk-spx-primary-hover:      #16447f;
  --smkk-spx-primary-active:     #123a6b;
  --smkk-spx-primary-surface:    #e6f0fd;
  --smkk-spx-primary-text:       #16386b;
  --smkk-spx-primary-text-on:    #ffffff;

  --smkk-spx-danger:             #b1342c;
  --smkk-spx-danger-surface:     #fdeceb;
  --smkk-spx-danger-text:        #8f241e;
  --smkk-spx-danger-text-on:     #ffffff;

  --smkk-spx-warning:            #97560c;
  --smkk-spx-warning-surface:    #fcf3e2;
  --smkk-spx-warning-text:       #7d4d0c;
  --smkk-spx-warning-text-on:    #ffffff;

  --smkk-spx-success:            #1c6033;
  --smkk-spx-success-surface:    #e6f6ec;
  --smkk-spx-success-text:       #1c6033;
  --smkk-spx-success-text-on:    #ffffff;

  --smkk-spx-info:               #185268;
  --smkk-spx-info-surface:       #e4f2f8;
  --smkk-spx-info-text:          #185268;
  --smkk-spx-info-text-on:       #ffffff;

  --smkk-spx-disabled-bg:        #e7e9ed;
  --smkk-spx-disabled-border:    #d4d8de;
  --smkk-spx-disabled-text:      #9aa1ab;
}

/* ----- SHOP-FLOOR  (Shop Focused — calm warm mid/dark amber, dim shop floor) ----- */
html[data-smkk-theme="shop-floor"] {
  --smkk-spx-bg:                 #161c19;
  --smkk-spx-bg-2:               #1b231f;
  --smkk-spx-surface:            #202824;
  --smkk-spx-surface-2:          #2a332e;
  --smkk-spx-surface-elevated:   #2c352f;
  --smkk-spx-surface-subtle:     #1b231f;
  --smkk-spx-surface-hover:      #2f3a34;
  --smkk-spx-row-alt:            #1d251f;

  --smkk-spx-text:               #eef2ea;
  --smkk-spx-text-strong:        #f6f9f3;
  --smkk-spx-text-muted:         #aeb8b0;
  --smkk-spx-text-on-accent:     #15110a;

  --smkk-spx-border:             #46524d;
  --smkk-spx-border-strong:      #6c7a72;

  --smkk-spx-action:             #f2b53d;
  --smkk-spx-action-hover:       #f7c156;
  --smkk-spx-action-active:      #e7a833;
  --smkk-spx-action-text:        #15110a;
  --smkk-spx-action-2:           #9fc89b;
  --smkk-spx-action-2-text:      #10160f;

  --smkk-spx-chip-bg:            #2c3631;
  --smkk-spx-chip-text:          #dfe6df;
  --smkk-spx-chip-border:        #6c7a72;
  --smkk-spx-chip-selected-bg:   #e7a833;
  --smkk-spx-chip-selected-text: #15110a;
  --smkk-spx-chip-selected-border: #f2b53d;

  --smkk-spx-field-bg:           #222b27;
  --smkk-spx-field-text:         #f3f6f1;
  --smkk-spx-field-placeholder:  #aeb8b0;
  --smkk-spx-field-border:       #6c7a72;
  --smkk-spx-field-focus-bg:     #26302b;
  --smkk-spx-field-focus-text:   #f6f9f3;
  --smkk-spx-focus-ring:         #f7c156;
  --smkk-spx-focus-ring-width:   2px;

  --smkk-spx-table-head-bg:      #2a332e;
  --smkk-spx-table-head-text:    #eef2ea;
  --smkk-spx-link:               #f2b53d;
  --smkk-spx-header-bg:          #0e1311;
  --smkk-spx-header-text:        #f4f8f3;

  --smkk-spx-primary:            #f2b53d;
  --smkk-spx-primary-hover:      #f7c156;
  --smkk-spx-primary-active:     #e7a833;
  --smkk-spx-primary-surface:    #3a2c12;
  --smkk-spx-primary-text:       #f0c98a;
  --smkk-spx-primary-text-on:    #15110a;

  --smkk-spx-danger:             #d65750;
  --smkk-spx-danger-surface:     #3a201e;
  --smkk-spx-danger-text:        #f4b6b0;
  --smkk-spx-danger-text-on:     #1a0e0d;

  --smkk-spx-warning:            #e0a04a;
  --smkk-spx-warning-surface:    #3a2c12;
  --smkk-spx-warning-text:       #f0c98a;
  --smkk-spx-warning-text-on:    #1a1206;

  --smkk-spx-success:            #52ad6b;
  --smkk-spx-success-surface:    #1c3324;
  --smkk-spx-success-text:       #9fd9ac;
  --smkk-spx-success-text-on:    #0c1810;

  --smkk-spx-info:               #4fa6c4;
  --smkk-spx-info-surface:       #163039;
  --smkk-spx-info-text:          #9fcfe0;
  --smkk-spx-info-text-on:       #08161b;

  --smkk-spx-disabled-bg:        #242b27;
  --smkk-spx-disabled-border:    #39423d;
  --smkk-spx-disabled-text:      #7c857e;

  --smkk-spx-shadow-100: 0 1px 2px rgba(0, 0, 0, 0.34);
  --smkk-spx-shadow-200: 0 2px 6px rgba(0, 0, 0, 0.40);
  --smkk-spx-shadow-300: 0 6px 16px rgba(0, 0, 0, 0.46);
  --smkk-spx-shadow-400: 0 18px 36px rgba(0, 0, 0, 0.52);
}

/* ----- MIDNIGHT  (Night Dark — true low-luminance low-blue night / dark room) ----- */
html[data-smkk-theme="midnight"] {
  --smkk-spx-bg:                 #0e0f0d;
  --smkk-spx-bg-2:               #16181a;
  --smkk-spx-surface:            #16181a;
  --smkk-spx-surface-2:          #1e2124;
  --smkk-spx-surface-elevated:   #1e2124;
  --smkk-spx-surface-subtle:     #131517;
  --smkk-spx-surface-hover:      #23262a;
  --smkk-spx-row-alt:            #131517;

  --smkk-spx-text:               #e4e2d6;
  --smkk-spx-text-strong:        #f0eee2;
  --smkk-spx-text-muted:         #a8a89c;
  --smkk-spx-text-on-accent:     #0d0f0c;

  --smkk-spx-border:             rgba(214, 206, 178, 0.16);
  --smkk-spx-border-strong:      #6b7075;

  --smkk-spx-action:             #d8a24a;
  --smkk-spx-action-hover:       #e0b15f;
  --smkk-spx-action-active:      #d8a24a;
  --smkk-spx-action-text:        #0d0f0c;
  --smkk-spx-action-2:           #7fb98a;
  --smkk-spx-action-2-text:      #0d0f0c;

  --smkk-spx-chip-bg:            #1c1f22;
  --smkk-spx-chip-text:          #cfcdc1;
  --smkk-spx-chip-border:        #6b7075;
  --smkk-spx-chip-selected-bg:   #d8a24a;
  --smkk-spx-chip-selected-text: #0d0f0c;
  --smkk-spx-chip-selected-border: #e0b15f;

  --smkk-spx-field-bg:           #101214;
  --smkk-spx-field-text:         #e4e2d6;
  --smkk-spx-field-placeholder:  #a8a89c;
  --smkk-spx-field-border:       #6b7075;
  --smkk-spx-field-focus-bg:     #101214;
  --smkk-spx-field-focus-text:   #e4e2d6;
  --smkk-spx-focus-ring:         #e0b15f;
  --smkk-spx-focus-ring-width:   2px;

  --smkk-spx-table-head-bg:      #23262a;
  --smkk-spx-table-head-text:    #e4e2d6;
  --smkk-spx-link:               #e0b15f;
  --smkk-spx-header-bg:          #0a0b0a;
  --smkk-spx-header-text:        #ece9dc;

  --smkk-spx-primary:            #d8a24a;
  --smkk-spx-primary-hover:      #e0b15f;
  --smkk-spx-primary-active:     #d8a24a;
  --smkk-spx-primary-surface:    #2a2110;
  --smkk-spx-primary-text:       #e0b15f;
  --smkk-spx-primary-text-on:    #0d0f0c;

  --smkk-spx-danger:             #eb9a90;
  --smkk-spx-danger-surface:     #2a1614;
  --smkk-spx-danger-text:        #eb9a90;
  --smkk-spx-danger-text-on:     #1a0e0d;

  --smkk-spx-warning:            #e0b15f;
  --smkk-spx-warning-surface:    #2a2110;
  --smkk-spx-warning-text:       #e0b15f;
  --smkk-spx-warning-text-on:    #1a1206;

  --smkk-spx-success:            #86c98f;
  --smkk-spx-success-surface:    #16261a;
  --smkk-spx-success-text:       #86c98f;
  --smkk-spx-success-text-on:    #0c1810;

  --smkk-spx-info:               #7fc2d4;
  --smkk-spx-info-surface:       #132630;
  --smkk-spx-info-text:          #7fc2d4;
  --smkk-spx-info-text-on:       #08161b;

  --smkk-spx-disabled-bg:        #1a1c1e;
  --smkk-spx-disabled-border:    #2c2e30;
  --smkk-spx-disabled-text:      #787c70;

  --smkk-spx-shadow-100: 0 1px 2px rgba(0, 0, 0, 0.50);
  --smkk-spx-shadow-200: 0 2px 6px rgba(0, 0, 0, 0.55);
  --smkk-spx-shadow-300: 0 6px 16px rgba(0, 0, 0, 0.62);
  --smkk-spx-shadow-400: 0 18px 40px rgba(0, 0, 0, 0.68);
}

/* ----- HIGH-CONTRAST  (Accessibility — max-contrast black / white / amber) ----- */
html[data-smkk-theme="high-contrast"] {
  --smkk-spx-bg:                 #000000;
  --smkk-spx-bg-2:               #0a0a0a;
  --smkk-spx-surface:            #050505;
  --smkk-spx-surface-2:          #141414;
  --smkk-spx-surface-elevated:   #1a1a1a;
  --smkk-spx-surface-subtle:     #141414;
  --smkk-spx-surface-hover:      #1a1a1a;
  --smkk-spx-row-alt:            #141414;

  --smkk-spx-text:               #ffffff;
  --smkk-spx-text-strong:        #ffffff;
  --smkk-spx-text-muted:         #f1f1f1;
  --smkk-spx-text-on-accent:     #000000;

  --smkk-spx-border:             #ffffff;
  --smkk-spx-border-strong:      #ffe45c;

  --smkk-spx-action:             #ffe45c;
  --smkk-spx-action-hover:       #ffe45c;
  --smkk-spx-action-active:      #ffd21a;
  --smkk-spx-action-text:        #000000;
  --smkk-spx-action-2:           #ffffff;
  --smkk-spx-action-2-text:      #000000;

  --smkk-spx-chip-bg:            #222222;
  --smkk-spx-chip-text:          #ffffff;
  --smkk-spx-chip-border:        #ffffff;
  --smkk-spx-chip-selected-bg:   #ffe45c;
  --smkk-spx-chip-selected-text: #000000;
  --smkk-spx-chip-selected-border: #ffffff;

  --smkk-spx-field-bg:           #0a0a0a;
  --smkk-spx-field-text:         #ffffff;
  --smkk-spx-field-placeholder:  #c8c8c8;
  --smkk-spx-field-border:       #ffffff;
  --smkk-spx-field-focus-bg:     #0a0a0a;
  --smkk-spx-field-focus-text:   #ffffff;
  --smkk-spx-focus-ring:         #ffe45c;
  --smkk-spx-focus-ring-width:   3px;

  --smkk-spx-table-head-bg:      #1f1f1f;
  --smkk-spx-table-head-text:    #ffffff;
  --smkk-spx-link:               #66e0ff;
  --smkk-spx-header-bg:          #000000;
  --smkk-spx-header-text:        #ffffff;

  --smkk-spx-primary:            #66e0ff;
  --smkk-spx-primary-hover:      #8fe9ff;
  --smkk-spx-primary-active:     #4fd7ff;
  --smkk-spx-primary-surface:    #001b24;
  --smkk-spx-primary-text:       #a8ecff;
  --smkk-spx-primary-text-on:    #000000;

  --smkk-spx-danger:             #ff8a80;
  --smkk-spx-danger-surface:     #2a0a08;
  --smkk-spx-danger-text:        #ffb3ad;
  --smkk-spx-danger-text-on:     #000000;

  --smkk-spx-warning:            #ffe45c;
  --smkk-spx-warning-surface:    #241f00;
  --smkk-spx-warning-text:       #ffe45c;
  --smkk-spx-warning-text-on:    #000000;

  --smkk-spx-success:            #8effa0;
  --smkk-spx-success-surface:    #06220c;
  --smkk-spx-success-text:       #8effa0;
  --smkk-spx-success-text-on:    #000000;

  --smkk-spx-info:               #8fd6ff;
  --smkk-spx-info-surface:       #031e2b;
  --smkk-spx-info-text:          #8fd6ff;
  --smkk-spx-info-text-on:       #000000;

  --smkk-spx-disabled-bg:        #1a1a1a;
  --smkk-spx-disabled-border:    #444444;
  --smkk-spx-disabled-text:      #c8c8c8;

  --smkk-spx-shadow-100: none;
  --smkk-spx-shadow-200: none;
  --smkk-spx-shadow-300: 0 6px 16px rgba(0, 0, 0, 0.80);
  --smkk-spx-shadow-400: 0 18px 40px rgba(0, 0, 0, 0.90);
}