/* ============================================================
   xmesh DS · _semantic.css — LEGACY ALIAS LAYER.

   This file used to define `--c-*` role tokens directly. After the
   MD3 migration, every `--c-*` token is a one-line alias of either
   a canonical `--md-sys-*` token or an `--xm-*` extension. Components
   should reference `--md-sys-*` / `--xm-*` directly; the aliases
   below remain only so unmigrated components keep working during the
   per-component rollout (Phase 7).

   This file deletes in Phase 10 once every component has migrated.
   ============================================================ */

/* ---------- Surfaces ---------- */
:root {
  --c-canvas:        var(--md-sys-color-surface);
  --c-canvas-deep:   var(--md-sys-color-surface-container-lowest);
  --c-canvas-raised: var(--md-sys-color-surface-container-low);
  --c-card:          var(--md-sys-color-inverse-surface);
  --c-card-soft:     var(--md-sys-color-surface-container-high);
  --c-input:         var(--md-sys-color-inverse-surface);
  --c-overlay:       oklch(0 0 0 / 0.5);
  --c-paper:         var(--xm-color-paper);

  --c-photo-overlay:     var(--xm-photo-overlay);
  --c-photo-overlay-ink: var(--xm-photo-overlay-ink);

  --c-sidebar-hover:  var(--md-sys-color-surface-container-lowest);
  --c-sidebar-active: var(--md-sys-color-surface-container-lowest);

  --c-bubble-user: var(--md-sys-color-surface-container-lowest);
  --c-bubble-bot:  var(--md-sys-color-surface-container-low);

  --c-composer-surface:       var(--md-sys-color-surface-container-high);
  --c-composer-surface-hi:    var(--md-sys-color-surface-container);
  --c-composer-border:        var(--md-sys-color-outline);
  --c-composer-border-active: var(--md-sys-color-outline);
}

:root[data-theme="light"] {
  --c-card:          var(--md-sys-color-inverse-surface);
  --c-card-soft:     var(--md-sys-color-surface-container);
  --c-input:         var(--md-sys-color-inverse-surface);

  --c-sidebar-hover:  var(--md-sys-color-surface-container);
  --c-sidebar-active: var(--md-sys-color-surface-container-high);

  --c-bubble-user:    var(--md-sys-color-surface-container-high);
  --c-bubble-bot:     var(--md-sys-color-inverse-surface);

  --c-composer-surface:       var(--md-sys-color-inverse-surface);
  --c-composer-surface-hi:    var(--md-sys-color-surface-container-low);
  --c-composer-border:        var(--md-sys-color-outline-variant);
  --c-composer-border-active: var(--md-sys-color-outline-variant);
}

/* ---------- Borders ---------- */
:root {
  --c-border:        var(--md-sys-color-outline-variant);
  --c-border-strong: var(--md-sys-color-outline);
  --c-border-subtle: var(--md-sys-color-outline-variant);
  --c-border-canvas: var(--md-sys-color-outline);
  --c-border-bubble: var(--xm-color-bubble-outline);
  --c-border-focus:  var(--md-sys-color-primary);
}

/* ---------- Text ---------- */
:root {
  --c-text:           var(--md-sys-color-inverse-on-surface);
  --c-text-body:      var(--md-sys-color-inverse-on-surface);
  --c-text-muted:     var(--xm-color-inverse-on-surface-muted);
  --c-text-hint:      var(--xm-color-inverse-on-surface-muted);

  --c-text-canvas:        var(--md-sys-color-on-surface);
  --c-text-canvas-strong: var(--md-sys-color-on-surface);
  --c-text-canvas-muted:  var(--md-sys-color-on-surface-variant);
  --c-text-canvas-soft:   var(--xm-color-on-surface-soft);

  --c-text-on-bubble-user: var(--md-sys-color-on-surface);
}

/* ---------- Accent / brand ---------- */
:root {
  --c-accent:          var(--md-sys-color-primary);
  --c-accent-strong:   var(--xm-color-primary-pressed);
  --c-accent-soft:     var(--md-sys-color-primary-container);
  --c-accent-ink:      var(--md-sys-color-on-primary);
  --c-accent-on:       var(--md-sys-color-on-primary);
  --c-accent-disabled: var(--md-sys-color-surface-container-high);

  --c-primary:          var(--md-sys-color-primary);
  --c-primary-strong:   var(--xm-color-primary-pressed);
  --c-primary-soft:     var(--md-sys-color-primary-container);
  --c-primary-ink:      var(--md-sys-color-on-primary);
  --c-primary-disabled: var(--md-sys-color-surface-container-high);

  --c-secondary:        var(--md-sys-color-secondary);
  --c-secondary-strong: var(--md-sys-color-secondary);
  --c-secondary-soft:   var(--md-sys-color-secondary-container);
  --c-secondary-ink:    var(--md-sys-color-on-secondary);
}

/* ---------- Snackbar overlay scrim ---------- */
:root {
  --c-snk-overlay-strong: var(--xm-snackbar-scrim-strong);
  --c-snk-overlay:        var(--xm-snackbar-scrim);
  --c-snk-overlay-soft:   var(--xm-snackbar-scrim-soft);
}

/* ---------- Badge groups: HTTP methods + file extensions ---------- */
:root {
  --c-method-get-bg:    var(--xm-method-get-bg);    --c-method-get-ink:    var(--xm-method-get-ink);
  --c-method-post-bg:   var(--xm-method-post-bg);   --c-method-post-ink:   var(--xm-method-post-ink);
  --c-method-put-bg:    var(--xm-method-put-bg);    --c-method-put-ink:    var(--xm-method-put-ink);
  --c-method-delete-bg: var(--xm-method-delete-bg); --c-method-delete-ink: var(--xm-method-delete-ink);
  --c-method-patch-bg:  var(--xm-method-patch-bg);  --c-method-patch-ink:  var(--xm-method-patch-ink);

  --c-ext-yml-bg:  var(--xm-ext-yml-bg);  --c-ext-yml-ink:  var(--xm-ext-yml-ink);
  --c-ext-json-bg: var(--xm-ext-json-bg); --c-ext-json-ink: var(--xm-ext-json-ink);
}

/* ---------- Documentation-only scales ----------
   Kept so the colors preview can render canvas + surface ramps
   without referencing primitives directly. Removed in Phase 8 when
   colors.html is rewritten to teach the MD3 vocabulary instead. */
:root {
  --c-canvas-0: var(--x-canvas-0);
  --c-canvas-1: var(--x-canvas-1);
  --c-canvas-2: var(--x-canvas-2);
  --c-canvas-3: var(--x-canvas-3);
  --c-canvas-4: var(--x-canvas-4);
  --c-canvas-5: var(--x-canvas-5);
  --c-canvas-6: var(--x-canvas-6);
  --c-canvas-7: var(--x-canvas-7);
  --c-canvas-8: var(--x-canvas-8);

  --c-surface-0: var(--x-surface-0);
  --c-surface-1: var(--x-surface-1);
  --c-surface-2: var(--x-surface-2);
  --c-surface-3: var(--x-surface-3);
  --c-surface-4: var(--x-surface-4);
  --c-surface-5: var(--x-surface-5);
  --c-surface-6: var(--x-surface-6);
  --c-surface-7: var(--x-surface-7);
  --c-surface-8: var(--x-surface-8);
}