/* ============================================================
   tokens/ui-foundation.css
   Semantic UI token contract + component primitives (preset-ui-v2 / v1).
   Extracted from includes/ui_v2_component_foundation.html — Phase 2.
   These --ui-* variables bridge --public-* and --settings-* tokens
   so components never reference hard-coded colours.
   ============================================================ */

/* Shared V2 semantic token contract. Theme colors drive accents; mode drives readability and surfaces. */
  body.preset-ui-v2,
  body.preset-ui-v1 {
    --ui-color-text-primary: var(--public-text-strong, var(--theme-page-text, #0f172a));
    --ui-color-text-muted: var(--public-text-muted, #475569);
    --ui-color-text-subtle: var(--public-text-soft, rgba(100, 116, 139, 0.72));
    --ui-color-border-default: var(--public-divider-color, rgba(148, 163, 184, 0.18));
    --ui-color-accent-primary: var(--theme-primary, #2563eb);
    --ui-color-accent-secondary: var(--theme-secondary, #1d4ed8);
    --ui-color-accent-primary-rgb: var(--theme-primary-rgb, 37, 99, 235);
    --ui-surface-page-bg: var(--public-page-bg, var(--theme-page-bg, #eef4fb));
    --ui-surface-panel-bg: var(--public-panel-bg, #ffffff);
    --ui-surface-card-bg: var(--public-card-bg, #ffffff);
    --ui-surface-subcard-bg: var(--public-subcard-bg, #f8fafc);
    --ui-component-control-bg: var(--public-control-bg, rgba(255, 255, 255, 0.92));
    --ui-component-control-border: var(--public-control-border, rgba(148, 163, 184, 0.22));
    --ui-component-input-bg: var(--public-input-bg, rgba(255, 255, 255, 0.95));
    --ui-component-input-border: var(--public-input-border, rgba(148, 163, 184, 0.24));
    --ui-nav-text: var(--ui-color-text-muted);
    --ui-nav-text-hover: var(--ui-color-text-primary);
    --ui-nav-text-active: var(--ui-color-text-primary);
    --ui-nav-hover-bg: color-mix(in srgb, rgba(var(--ui-color-accent-primary-rgb), 0.10) 70%, transparent);
    --ui-nav-dropdown-surface: var(--public-nav-dropdown-surface, var(--ui-surface-panel-bg));
    --ui-nav-dropdown-item-surface: var(--public-nav-dropdown-item-surface, var(--ui-surface-subcard-bg));
    --ui-nav-dropdown-item-hover-surface: var(--public-nav-dropdown-item-hover-surface, var(--ui-nav-hover-bg));
  }

  body.preset-ui-v2 .settings-theme-shell,
  body.preset-ui-v2 .tool-theme-shell,
  body.preset-ui-v1 .settings-theme-shell,
  body.preset-ui-v1 .tool-theme-shell {
    --ui-color-text-primary: var(--settings-theme-ink, var(--public-text-strong, #0f172a));
    --ui-color-text-muted: var(--settings-theme-muted, var(--public-text-muted, #475569));
    --ui-color-text-subtle: color-mix(in srgb, var(--settings-theme-muted, #475569) 78%, transparent);
    --ui-color-border-default: var(--settings-surface-border, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    --ui-color-accent-primary: var(--settings-theme-primary, var(--theme-primary, #2563eb));
    --ui-color-accent-secondary: var(--settings-theme-secondary, var(--theme-secondary, #1d4ed8));
    --ui-color-accent-primary-rgb: var(--settings-theme-primary-rgb, var(--theme-primary-rgb, 37, 99, 235));
    --ui-surface-panel-bg: var(--settings-surface-bg, var(--public-panel-bg, #ffffff));
    --ui-surface-card-bg: var(--settings-card-bg, var(--public-card-bg, #ffffff));
    --ui-surface-subcard-bg: var(--settings-surface-subtle, var(--public-subcard-bg, #f8fafc));
    --ui-component-control-bg: var(--settings-surface-subtle, var(--public-control-bg, rgba(255,255,255,0.92)));
    --ui-component-control-border: var(--settings-surface-border, var(--public-control-border, rgba(148, 163, 184, 0.22)));
    --ui-component-input-bg: var(--settings-input-bg, var(--public-input-bg, rgba(255,255,255,0.95)));
    --ui-component-input-border: var(--settings-input-border, var(--public-input-border, rgba(148, 163, 184, 0.24)));
  }

  /* Wave 3 foundation: shared v2 component primitives backed by canonical ui-* vars.
     box-shadow and border-radius use --ds-* vars so DS body-class overrides
     (ds-shadows-*, ds-corners-*) take effect automatically. */
  body.preset-ui-v2 .ui-card {
    background: var(--ui-surface-card-bg, var(--public-card-bg, #ffffff));
    border: 1px solid var(--ui-color-border-default, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    border-radius: var(--ds-card-radius, 1rem);
    box-shadow: var(--ds-card-shadow-raised, 0 14px 30px rgba(15, 23, 42, 0.08));
  }

  body.preset-ui-v2 .ui-panel {
    background: var(--ui-surface-panel-bg, var(--public-panel-bg, #ffffff));
    border: 1px solid var(--ui-color-border-default, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    border-radius: var(--ds-card-radius, 1rem);
  }

  body.preset-ui-v2 .ui-input,
  body.preset-ui-v2 .ui-select,
  body.preset-ui-v2 .ui-textarea {
    background: var(--ui-component-input-bg, var(--public-input-bg, rgba(255, 255, 255, 0.95)));
    border: 1px solid var(--ui-component-input-border, var(--public-input-border, rgba(148, 163, 184, 0.24)));
    color: var(--ui-color-text-primary, var(--public-text-strong, #0f172a));
    border-radius: var(--ds-input-radius, 0.75rem);
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  }

  body.preset-ui-v2 .ui-input:focus,
  body.preset-ui-v2 .ui-select:focus,
  body.preset-ui-v2 .ui-textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.40) 70%, var(--ui-component-input-border, rgba(148, 163, 184, 0.24)) 30%);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
  }

  body.preset-ui-v2 .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--ds-btn-radius, 0.75rem);
    border: 1px solid transparent;
    font-weight: 600;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    cursor: pointer;
  }

  body.preset-ui-v2 .ui-btn:active {
    transform: translateY(1px);
  }

  body.preset-ui-v2 .ui-btn-primary {
    background: var(--ui-color-accent-primary, var(--theme-primary, #2563eb));
    border-color: color-mix(in srgb, var(--ui-color-accent-primary, var(--theme-primary, #2563eb)) 75%, #000 25%);
    color: #ffffff;
  }

  body.preset-ui-v2 .ui-btn-primary:hover {
    background: color-mix(in srgb, var(--ui-color-accent-primary, var(--theme-primary, #2563eb)) 86%, #000 14%);
  }

  body.preset-ui-v2 .ui-btn-secondary {
    background: var(--ui-component-control-bg, var(--public-control-bg, rgba(255, 255, 255, 0.92)));
    border-color: var(--ui-component-control-border, var(--public-control-border, rgba(148, 163, 184, 0.22)));
    color: var(--ui-color-text-primary, var(--public-text-strong, #0f172a));
  }

  body.preset-ui-v2 .ui-btn-secondary:hover {
    background: var(--public-control-hover-bg, rgba(255, 255, 255, 0.98));
  }

  body.preset-ui-v2 .ui-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--ui-color-border-default, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    background: color-mix(in srgb, var(--ui-surface-subcard-bg, var(--public-subcard-bg, #f8fafc)) 75%, transparent);
    color: var(--ui-color-text-muted, var(--public-text-muted, #475569));
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
  }

  body.preset-ui-v2 .ui-nav-pills {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--ui-color-border-default, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    background: color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, #ffffff)) 94%, transparent);
    padding: 0.35rem;
  }

  body.preset-ui-v2 .ui-nav-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.6rem 0.95rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--ui-color-text-muted, var(--public-text-muted, #475569));
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }

  body.preset-ui-v2 .ui-nav-pill:hover {
    background: color-mix(in srgb, var(--ui-color-accent-primary, var(--theme-primary, #2563eb)) 8%, transparent);
    color: var(--ui-color-text-primary, var(--public-text-strong, #0f172a));
  }

  body.preset-ui-v2 .ui-nav-pill[aria-current='page'] {
    background: color-mix(in srgb, var(--ui-color-accent-primary, var(--theme-primary, #2563eb)) 16%, transparent);
    color: var(--ui-color-text-primary, var(--public-text-strong, #0f172a));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-color-accent-primary, var(--theme-primary, #2563eb)) 22%, transparent);
  }

  body.preset-ui-v2 .ui-alert {
    border-radius: 1rem;
    border: 1px solid var(--ui-color-border-default, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    padding: 1rem 1.125rem;
    color: var(--ui-color-text-primary, var(--public-text-strong, #0f172a));
  }

  body.preset-ui-v2 .ui-alert-success {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.05));
    border-color: rgba(16, 185, 129, 0.22);
  }

  body.preset-ui-v2 .ui-alert-warning {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.06));
    border-color: rgba(245, 158, 11, 0.24);
  }

  body.preset-ui-v2 .ui-alert-danger {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.06));
    border-color: rgba(239, 68, 68, 0.22);
  }

  body.preset-ui-v2 .ui-modal-backdrop {
    background: color-mix(in srgb, var(--ui-color-text-primary, #0f172a) 24%, transparent);
    border-radius: 1.5rem;
    padding: 1.5rem;
  }

  body.preset-ui-v2 .ui-modal-card {
    background: var(--ui-surface-panel-bg, var(--public-panel-bg, #ffffff));
    border: 1px solid var(--ui-color-border-default, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    border-radius: 1.25rem;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
  }

  body.preset-ui-v2 .ui-tooltip {
    background: color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, #ffffff)) 92%, transparent);
    border: 1px solid var(--ui-color-border-default, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    color: var(--ui-color-text-primary, var(--public-text-strong, #0f172a));
    border-radius: 0.625rem;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(8px);
  }

/* ── */


  /* Wave 5: remap hardcoded Tailwind text/bg/border utilities to themed CSS vars within .themed-shell.
     This ensures page content responds to preset theme switches without individual template rewrites. */
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-900,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-800,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-950,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-900,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-800,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-900,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-800,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-950,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-900,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-800 {
    color: var(--public-text-strong, #0f172a) !important;
  }

  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-700,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-600,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-500,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-700,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-600,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-500,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-700,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-600,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-500,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-700,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-600,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-500 {
    color: var(--public-text-muted, #475569) !important;
  }

  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-400,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-300,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-400,
  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-300,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-400,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-gray-300,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-400,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) .text-slate-300 {
    color: var(--public-text-soft, rgba(100, 116, 139, 0.72)) !important;
  }

  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) :is(input:not([type='checkbox']):not([type='radio']):not([type='color']), select, textarea),
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) :is(input:not([type='checkbox']):not([type='radio']):not([type='color']), select, textarea) {
    color: var(--public-input-text, var(--public-text-strong, #0f172a)) !important;
    border-color: var(--public-input-border, rgba(148, 163, 184, 0.24)) !important;
    background-color: var(--public-input-bg, rgba(255, 255, 255, 0.95)) !important;
  }

  body.preset-ui-v2 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) :is(input, textarea)::placeholder,
  body.preset-ui-v1 :is(.themed-shell, .tool-theme-shell, .assessment-theme-shell, .page-shell, .settings-theme-shell) :is(input, textarea)::placeholder {
    color: color-mix(in srgb, var(--public-text-muted, #475569) 86%, transparent) !important;
    opacity: 1;
  }

  body.preset-ui-v2 .themed-shell .bg-white {
    background-color: var(--public-panel-bg, #ffffff);
  }

  body.preset-ui-v2 .themed-shell .bg-gray-50 {
    background-color: color-mix(in srgb, var(--public-panel-bg, #ffffff) 72%, var(--public-subcard-bg, #f8fafc) 28%);
  }

  body.preset-ui-v2 .themed-shell .bg-gray-100 {
    background-color: var(--public-subcard-bg, #f8fafc);
  }

  body.preset-ui-v2 .themed-shell .border-gray-200,
  body.preset-ui-v2 .themed-shell .border-slate-200 {
    border-color: var(--public-divider-color, rgba(148, 163, 184, 0.22));
  }

  /* V1 compatibility: keep shared class hooks functional with simpler legacy styling. */
  body.preset-ui-v1 .ui-card,
  body.preset-ui-v1 .ui-panel {
    background: var(--public-panel-bg, #ffffff);
    border: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.18));
    border-radius: var(--ds-card-radius, 1rem);
    box-shadow: var(--ds-card-shadow, none);
  }

  body.preset-ui-v1 .ui-input,
  body.preset-ui-v1 .ui-select,
  body.preset-ui-v1 .ui-textarea {
    background: var(--public-input-bg, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--public-input-border, rgba(148, 163, 184, 0.24));
    color: var(--public-text-strong, #0f172a);
    border-radius: var(--ds-input-radius, 0.75rem);
  }

/* ── */