/*
 * MOSS Design System — tokens.css
 * Editorial Calm: Mineral Moss (light) + Deep Moss (dark).
 * Components consume semantic or component tokens, never primitives.
 * Version: 2.0.1 — v3-aligned structure; restored workbench tokens
 * (border-width-default, panel-bg, context-panel width, button/nav icon sizes).
 */

/* ═══════════════════════════════════════════════════
   LIGHT THEME (default)
   ═══════════════════════════════════════════════════ */
:root {
  /* ── Primitive: Color ── */
  --primitive-moss-50: #f1f7f3;
  --primitive-moss-100: #e1eee8;
  --primitive-moss-200: #c4ddcf;
  --primitive-moss-300: #9bc4af;
  --primitive-moss-400: #6d9d84;
  --primitive-moss-500: #3e7b65;
  --primitive-moss-600: #1f6250;
  --primitive-moss-700: #164438;
  --primitive-moss-800: #12372e;

  --primitive-slate-50: #f5f6f2;
  --primitive-slate-100: #edf1ed;
  --primitive-slate-200: #d8ded7;
  --primitive-slate-300: #c8d0c6;
  --primitive-slate-400: #929c94;
  --primitive-slate-500: #66716a;
  --primitive-slate-700: #37433c;
  --primitive-slate-900: #18221d;

  --primitive-blue-100: #e0edf5;
  --primitive-blue-600: #2f6e98;
  --primitive-amber-100: #f6ead7;
  --primitive-amber-700: #a86c1c;
  --primitive-red-100: #f6e3e3;
  --primitive-red-700: #a65050;
  --primitive-white: #ffffff;
  --primitive-black: #000000;

  /* Domain accent colors (light) */
  --primitive-dom-k: #2e6b55;  /* Knowledge — moss green */
  --primitive-dom-a: #a35d18;  /* Action — amber */
  --primitive-dom-c: #2f6e98;  /* Context — blue */
  --primitive-dom-s: #96536b;  /* Self — rose */
  --primitive-dom-a2: #8a6d1f; /* Asset — gold */
  --primitive-dom-g: #5b665e;  /* Governance — slate */

  /* ── Primitive: Typography ── */
  --primitive-font-ui: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --primitive-font-display: var(--font-fraunces, "Fraunces"), "Iowan Old Style", "Songti SC", Georgia, serif;
  --primitive-font-mono: "SF Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --primitive-font-weight-regular: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;
  --primitive-font-weight-display: 600;
  --primitive-font-weight-cjk-compensate: 750;

  --primitive-font-size-9: 0.5625rem;
  --primitive-font-size-10: 0.625rem;
  --primitive-font-size-11: 0.6875rem;
  --primitive-font-size-12: 0.75rem;
  --primitive-font-size-13: 0.8125rem;
  --primitive-font-size-14: 0.875rem;
  --primitive-font-size-16: 1rem;
  --primitive-font-size-17: 1.0625rem;
  --primitive-font-size-18: 1.125rem;
  --primitive-font-size-22: 1.375rem;
  --primitive-font-size-28: 1.75rem;
  --primitive-font-size-32: 2rem;
  --primitive-font-size-34: 2.125rem;
  --primitive-font-size-47: 2.9375rem;

  --primitive-line-height-tight: 1.1;
  --primitive-line-height-heading: 1.28;
  --primitive-line-height-body: 1.55;
  --primitive-line-height-reading: 1.7;
  --primitive-letter-spacing-label: 0.08em;
  --primitive-letter-spacing-kicker: 0.16em;
  --primitive-letter-spacing-display: -0.025em;

  /* ── Primitive: Space ── */
  --primitive-space-0: 0;
  --primitive-space-1: 0.25rem;
  --primitive-space-2: 0.5rem;
  --primitive-space-3: 0.75rem;
  --primitive-space-4: 1rem;
  --primitive-space-5: 1.25rem;
  --primitive-space-6: 1.5rem;
  --primitive-space-8: 2rem;
  --primitive-space-10: 2.5rem;
  --primitive-space-12: 3rem;

  /* ── Primitive: Shape ── */
  --primitive-radius-0: 0;
  --primitive-radius-4: 0.25rem;
  --primitive-radius-6: 0.375rem;
  --primitive-radius-8: 0.5rem;
  --primitive-radius-10: 0.625rem;
  --primitive-radius-14: 0.875rem;
  --primitive-radius-pill: 99px;

  /* ── Primitive: Elevation ── */
  --primitive-shadow-1: 0 1px 2px rgba(28,35,30,.05), 0 1px 1px rgba(28,35,30,.03);
  --primitive-shadow-2: 0 2px 6px rgba(28,35,30,.05), 0 10px 28px rgba(28,35,30,.08);
  --primitive-shadow-3: 0 6px 16px rgba(28,35,30,.09), 0 24px 56px rgba(28,35,30,.14);
  --primitive-shadow-overlay: 0 20px 65px rgb(24 34 29 / 20%);
  --primitive-shadow-drawer: -18px 0 45px rgb(24 34 29 / 14%);
  --primitive-shadow-glow: 0 4px 12px rgba(46,107,85,.13);

  /* ── Primitive: Motion ── */
  --primitive-duration-instant: 0ms;
  --primitive-duration-fast: 120ms;
  --primitive-duration-standard: 180ms;
  --primitive-duration-slow: 350ms;
  --primitive-duration-reveal: 550ms;
  --primitive-easing-standard: ease;
  --primitive-easing-smooth: cubic-bezier(.22,.9,.32,1);
  --primitive-easing-spring: cubic-bezier(.34,1.4,.44,1);

  /* ── Primitive: Surface texture ── */
  --primitive-grain-opacity: 0.04;
  --primitive-wash-1: rgba(62,123,101,.09);
  --primitive-wash-2: rgba(163,93,24,.06);

  /* ═══════════════════════════════════════════════
     SEMANTIC TOKENS (light)
     ═══════════════════════════════════════════════ */

  /* Color: background */
  --color-bg-canvas: #f1f3ec;
  --color-bg-surface: #f9faf5;
  --color-bg-raised: #ffffff;
  --color-bg-subtle: var(--primitive-slate-100);

  /* Color: text */
  --color-text-primary: #1c231e;
  --color-text-secondary: #5b665e;
  --color-text-tertiary: #8d978d;
  --color-text-disabled: #8d978d;
  --color-text-inverse: #ffffff;

  /* Color: border */
  --color-border-default: #dce1d6;
  --color-border-strong: #c6cfc1;
  --color-border-focus: var(--primitive-moss-600);

  /* Border width */
  --border-width-default: 1px;

  /* Color: accent */
  --color-accent-primary: #2e6b55;
  --color-accent-strong: #1c4a3a;
  --color-accent-bright: #3d8a6e;
  --color-accent-subtle: #e0ebe3;
  --color-accent-glow: rgba(46,107,85,.13);

  /* Color: semantic */
  --color-link: var(--primitive-blue-600);
  --color-info: var(--primitive-blue-600);
  --color-info-subtle: var(--primitive-blue-100);
  --color-warning: #a35d18;
  --color-warning-subtle: #f5e7d2;
  --color-danger: #a83d38;
  --color-danger-subtle: #f5e1df;
  --color-overlay: rgb(24 34 29 / 22%);

  /* Color: domain accents */
  --color-dom-k: var(--primitive-dom-k);
  --color-dom-a: var(--primitive-dom-a);
  --color-dom-c: var(--primitive-dom-c);
  --color-dom-s: var(--primitive-dom-s);
  --color-dom-a2: var(--primitive-dom-a2);
  --color-dom-g: var(--primitive-dom-g);

  /* Color: surface texture */
  --color-wash-1: var(--primitive-wash-1);
  --color-wash-2: var(--primitive-wash-2);
  --color-topbar-bg: rgba(241,243,236,.82);
  --color-grain-opacity: var(--primitive-grain-opacity);

  /* Typography */
  --font-family-ui: var(--primitive-font-ui);
  --font-family-display: var(--primitive-font-display);
  --font-family-mono: var(--primitive-font-mono);

  --font-size-viz-note: var(--primitive-font-size-9);
  --font-size-label: var(--primitive-font-size-10);
  --font-size-caption: var(--primitive-font-size-11);
  --font-size-meta: var(--primitive-font-size-12);
  --font-size-body: var(--primitive-font-size-14);
  --font-size-body-large: var(--primitive-font-size-16);
  --font-size-title-3: var(--primitive-font-size-17);
  --font-size-title-2: var(--primitive-font-size-22);
  --font-size-title-1: var(--primitive-font-size-28);
  --font-size-display: var(--primitive-font-size-34);
  --font-size-hero: var(--primitive-font-size-47);

  --line-height-tight: var(--primitive-line-height-tight);
  --line-height-heading: var(--primitive-line-height-heading);
  --line-height-body: var(--primitive-line-height-body);
  --line-height-reading: var(--primitive-line-height-reading);

  --font-weight-regular: var(--primitive-font-weight-regular);
  --font-weight-medium: var(--primitive-font-weight-medium);
  --font-weight-semibold: var(--primitive-font-weight-semibold);
  --font-weight-bold: var(--primitive-font-weight-bold);
  --font-weight-display: var(--primitive-font-weight-display);
  --font-weight-cjk-compensate: var(--primitive-font-weight-cjk-compensate);

  --letter-spacing-label: var(--primitive-letter-spacing-label);
  --letter-spacing-kicker: var(--primitive-letter-spacing-kicker);
  --letter-spacing-display: var(--primitive-letter-spacing-display);

  /* Space */
  --space-inline-2xs: var(--primitive-space-1);
  --space-inline-xs: var(--primitive-space-2);
  --space-inline-sm: var(--primitive-space-3);
  --space-inline-md: var(--primitive-space-4);
  --space-stack-2xs: var(--primitive-space-1);
  --space-stack-xs: var(--primitive-space-2);
  --space-stack-sm: var(--primitive-space-3);
  --space-stack-md: var(--primitive-space-4);
  --space-section: var(--primitive-space-8);

  /* Shape */
  --radius-subtle: var(--primitive-radius-4);
  --radius-control: var(--primitive-radius-6);
  --radius-card: var(--primitive-radius-10);
  --radius-overlay: var(--primitive-radius-14);
  --radius-pill: var(--primitive-radius-pill);

  /* Elevation */
  --elevation-1: var(--primitive-shadow-1);
  --elevation-2: var(--primitive-shadow-2);
  --elevation-3: var(--primitive-shadow-3);
  --elevation-overlay: var(--primitive-shadow-overlay);
  --elevation-drawer: var(--primitive-shadow-drawer);
  --elevation-glow: var(--primitive-shadow-glow);

  /* Motion */
  --motion-duration-instant: var(--primitive-duration-instant);
  --motion-duration-fast: var(--primitive-duration-fast);
  --motion-duration-standard: var(--primitive-duration-standard);
  --motion-duration-slow: var(--primitive-duration-slow);
  --motion-duration-reveal: var(--primitive-duration-reveal);
  --motion-easing-standard: var(--primitive-easing-standard);
  --motion-easing-smooth: var(--primitive-easing-smooth);
  --motion-easing-spring: var(--primitive-easing-spring);

  /* Layout */
  --layout-sidebar-width: 15.75rem;
  --layout-inspector-width: 20.125rem;
  --layout-context-panel-width: 20.25rem;
  --layout-reading-width: 46rem;
  --layout-content-max-width: 74rem;
  --layout-page-padding: clamp(1.375rem, 3vw, 3.125rem);
  --layout-workspace-padding-block-start: 0;
  --layout-workspace-padding-block-end: 4.5rem;
  --layout-workspace-padding-inline: clamp(1.375rem, 3vw, 3rem);

  /* Sizes */
  --size-icon-sm: 1rem;
  --size-icon-md: 1.125rem;
  --size-icon-lg: 1.25rem;
  --size-avatar-sm: 1.5rem;
  --size-control-xs: 1.625rem;
  --size-control-sm: 1.75rem;
  --size-control-md: 2.125rem;
  --size-brand-mark: 2.25rem;
  --size-focus-icon: 2.75rem;
  --size-domain-letter: 1.375rem;
  --size-progress-ring: 3.875rem;

  /* ═══════════════════════════════════════════════
     COMPONENT TOKENS
     ═══════════════════════════════════════════════ */

  /* Brand */
  --component-brand-mark-size: 1.875rem;
  --component-brand-mark-radius: 0.5625rem;
  --component-brand-mark-font-size: var(--primitive-font-size-19, 1.1875rem);

  /* Sidebar */
  --component-sidebar-padding: 1.25rem 0.875rem;
  --component-sidebar-section-gap: 1.375rem;
  --component-nav-item-min-height: 2.3125rem;
  --component-nav-item-radius: var(--primitive-radius-8);
  --component-nav-item-padding-inline: 0.5625rem;
  --component-nav-item-padding-block: 0.4375rem;
  --component-nav-item-bg-active: var(--color-accent-subtle);
  --component-nav-item-text-active: var(--color-accent-strong);
  --component-nav-item-indicator-width: 0.1875rem;
  --component-nav-item-icon-size: var(--size-icon-md);

  /* Button */
  --component-button-height: var(--size-control-md);
  --component-button-padding-inline: 0.8125rem;
  --component-button-radius: var(--primitive-radius-8);
  --component-button-bg: var(--color-bg-raised);
  --component-button-border: var(--color-border-strong);
  --component-button-text: var(--color-text-secondary);
  --component-button-bg-hover: var(--color-bg-subtle);
  --component-button-shadow: var(--elevation-1);
  --component-button-shadow-hover: var(--elevation-glow);
  --component-button-primary-bg: linear-gradient(180deg, var(--color-accent-bright), var(--color-accent-primary));
  --component-button-primary-border: var(--color-accent-strong);
  --component-button-primary-text: #f3f8f4;

  /* Icon button */
  --component-icon-button-size: var(--size-control-md);
  --component-button-icon-size: var(--size-icon-md);

  /* Filter bar */
  --component-filter-height: var(--size-control-sm);
  --component-filter-padding-inline: 0.5625rem;
  --component-filter-radius: var(--radius-subtle);
  --component-filter-bg-active: var(--color-accent-subtle);
  --component-filter-text-active: var(--color-accent-strong);

  /* Feedback control */
  --component-feedback-height: var(--size-control-xs);
  --component-feedback-padding-inline: 0.4375rem;
  --component-feedback-radius: var(--radius-control);
  --component-feedback-bg-selected: var(--color-accent-subtle);
  --component-feedback-border-selected: var(--color-accent-primary);
  --component-feedback-group-padding: 0.1875rem;
  --component-feedback-group-bg: var(--color-bg-subtle);

  /* Avatar */
  --component-avatar-size: var(--size-avatar-sm);

  /* Content row (feed item) */
  --component-content-row-padding-block-start: 1.25rem;
  --component-content-row-padding-block-end: 1.125rem;
  --component-content-row-padding-inline-active: 0.625rem;
  --component-content-row-reading-offset: 2rem;
  --component-content-row-footer-gap: var(--primitive-space-3);
  --component-content-row-selected-indicator: 0.125rem;
  --component-content-row-bg-hover: var(--color-bg-subtle);
  --component-content-row-bg-selected: var(--color-accent-subtle);

  /* Panel surface */
  --component-panel-bg: var(--color-bg-surface);

  /* Context panel (inspector) */
  --component-context-panel-padding: 1.375rem 1.25rem;
  --component-context-section-padding: 1.1875rem;
  --component-context-score-size: 1.75rem;
  --component-meter-height: 0.1875rem;

  /* Card / Module */
  --component-card-radius: var(--radius-overlay);
  --component-card-padding: 1.0625rem;
  --component-card-bg: var(--color-bg-raised);
  --component-card-border: var(--color-border-default);
  --component-card-shadow: var(--elevation-1);
  --component-card-shadow-hover: var(--elevation-2);
  --component-card-translate-hover: -2px;

  /* Focus item (priority card) */
  --component-focus-item-min-height: 5.875rem;
  --component-focus-item-padding: 1rem 1.125rem 1rem 1.375rem;
  --component-focus-item-rail-width: 0.21875rem;
  --component-focus-item-selected-ring: 0 0 0 3px var(--color-accent-glow);

  /* Signal card */
  --component-signal-card-min-height: 11.625rem;
  --component-signal-card-padding: 1.125rem;
  --component-signal-card-tinted-bg: linear-gradient(160deg, var(--color-accent-subtle), var(--color-bg-raised) 68%);
  --component-signal-card-warm-bg: linear-gradient(160deg, var(--color-warning-subtle), var(--color-bg-raised) 72%);

  /* Coverage meter */
  --component-meter-segment-height: 0.25rem;
  --component-meter-segment-gap: 0.1875rem;
  --component-meter-segment-radius: 0.125rem;

  /* Inspector */
  --component-inspector-padding: 1.375rem 1.25rem;
  --component-inspector-primary-bg: color-mix(in srgb, var(--color-accent-subtle) 35%, transparent);
  --component-inspector-section-padding: 1rem 0;

  /* Tag / Chip */
  --component-tag-radius: var(--primitive-radius-6);
  --component-tag-padding-block: 0.1875rem;
  --component-tag-padding-inline: 0.5rem;
  --component-tag-font-size: var(--font-size-label);
  --component-chip-radius: var(--radius-pill);
  --component-chip-padding: 0.25rem 0.625rem;

  /* Count chip */
  --component-count-chip-radius: var(--radius-pill);
  --component-count-chip-padding: 0.125rem 0.5rem;
  --component-count-chip-bg: var(--color-accent-subtle);
  --component-count-chip-text: var(--color-accent-strong);

  /* Viz annotation */
  --component-viz-note-font-size: var(--font-size-viz-note);
  --component-viz-note-color: var(--color-text-tertiary);
  --component-viz-legend-swatch-width: 0.5rem;
  --component-viz-legend-swatch-height: 0.125rem;

  /* Bar chart */
  --component-bar-track-height: 0.4375rem;
  --component-bar-track-radius: 0.25rem;
  --component-bar-mark-width: 0.125rem;

  /* Skeleton */
  --component-skeleton-bg: var(--color-border-default);
  --component-skeleton-shimmer: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-bg-raised) 60%, transparent), transparent);
  --component-skeleton-duration: 1.4s;

  /* Empty state */
  --component-empty-padding: 3.5rem 1.25rem;
  --component-empty-border: 1px dashed var(--color-border-strong);
  --component-empty-radius: var(--radius-overlay);

  /* Toast */
  --component-toast-border-left-width: 0.25rem;
  --component-toast-radius: var(--radius-card);

  /* Detail drawer */
  --component-drawer-width: min(48rem, 94vw);
  --component-drawer-topbar-bg: var(--color-topbar-bg);

  /* Topbar */
  --component-topbar-height: 3.25rem;
  --component-topbar-bg: var(--color-topbar-bg);
  --component-topbar-blur: 14px;

  /* Hero glow */
  --component-hero-glow-blur: 80px;
  --component-hero-glow-opacity: 0.55;

  /* Focus ring */
  --component-focus-ring: 0 0 0 2px var(--color-bg-raised), 0 0 0 4px var(--color-border-focus);

  /* Stagger delays */
  --stagger-1: 0.03s;
  --stagger-2: 0.09s;
  --stagger-3: 0.15s;
  --stagger-4: 0.21s;
  --stagger-5: 0.27s;
  --stagger-6: 0.33s;
}

/* ═══════════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════════ */
[data-theme="dark"] {
  --color-bg-canvas: #131712;
  --color-bg-surface: #191e18;
  --color-bg-raised: #20261f;
  --color-bg-subtle: #252b24;

  --color-text-primary: #e7ece5;
  --color-text-secondary: #a2aca1;
  --color-text-tertiary: #727d70;
  --color-text-disabled: #727d70;

  --color-border-default: #2b322a;
  --color-border-strong: #3c453a;
  --color-border-focus: #7db89d;

  --color-accent-primary: #7db89d;
  --color-accent-strong: #aad3bd;
  --color-accent-bright: #8ec7ab;
  --color-accent-subtle: #213229;
  --color-accent-glow: rgba(125,184,157,.15);

  --color-warning: #d99e57;
  --color-warning-subtle: #33281a;
  --color-danger: #d88a84;
  --color-danger-subtle: #372523;
  --color-overlay: rgb(0 0 0 / 42%);

  --color-dom-k: #7db89d;
  --color-dom-a: #d99e57;
  --color-dom-c: #79aecf;
  --color-dom-s: #c78ba1;
  --color-dom-a2: #c9ab55;
  --color-dom-g: #a2aca1;

  --color-wash-1: rgba(125,184,157,.12);
  --color-wash-2: rgba(217,158,87,.08);
  --color-topbar-bg: rgba(19,23,18,.8);
  --color-grain-opacity: 0.03;

  --primitive-shadow-1: 0 1px 2px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.18);
  --primitive-shadow-2: 0 2px 8px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --primitive-shadow-3: 0 8px 20px rgba(0,0,0,.35), 0 28px 64px rgba(0,0,0,.45);
  --primitive-shadow-overlay: 0 20px 65px rgba(0,0,0,.5);
  --primitive-shadow-drawer: -18px 0 45px rgba(0,0,0,.4);
  --primitive-shadow-glow: 0 4px 14px rgba(125,184,157,.15);

  --elevation-1: var(--primitive-shadow-1);
  --elevation-2: var(--primitive-shadow-2);
  --elevation-3: var(--primitive-shadow-3);
  --elevation-overlay: var(--primitive-shadow-overlay);
  --elevation-drawer: var(--primitive-shadow-drawer);
  --elevation-glow: var(--primitive-shadow-glow);
}

/* Auto dark via system preference (unless explicitly overridden) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: #131712;
    --color-bg-surface: #191e18;
    --color-bg-raised: #20261f;
    --color-bg-subtle: #252b24;
    --color-text-primary: #e7ece5;
    --color-text-secondary: #a2aca1;
    --color-text-tertiary: #727d70;
    --color-text-disabled: #727d70;
    --color-border-default: #2b322a;
    --color-border-strong: #3c453a;
    --color-border-focus: #7db89d;
    --color-accent-primary: #7db89d;
    --color-accent-strong: #aad3bd;
    --color-accent-bright: #8ec7ab;
    --color-accent-subtle: #213229;
    --color-accent-glow: rgba(125,184,157,.15);
    --color-warning: #d99e57;
    --color-warning-subtle: #33281a;
    --color-danger: #d88a84;
    --color-danger-subtle: #372523;
    --color-overlay: rgb(0 0 0 / 42%);
    --color-dom-k: #7db89d;
    --color-dom-a: #d99e57;
    --color-dom-c: #79aecf;
    --color-dom-s: #c78ba1;
    --color-dom-a2: #c9ab55;
    --color-dom-g: #a2aca1;
    --color-wash-1: rgba(125,184,157,.12);
    --color-wash-2: rgba(217,158,87,.08);
    --color-topbar-bg: rgba(19,23,18,.8);
    --color-grain-opacity: 0.03;
    --primitive-shadow-1: 0 1px 2px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.18);
    --primitive-shadow-2: 0 2px 8px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
    --primitive-shadow-3: 0 8px 20px rgba(0,0,0,.35), 0 28px 64px rgba(0,0,0,.45);
    --primitive-shadow-overlay: 0 20px 65px rgba(0,0,0,.5);
    --primitive-shadow-drawer: -18px 0 45px rgba(0,0,0,.4);
    --primitive-shadow-glow: 0 4px 14px rgba(125,184,157,.15);
    --elevation-1: var(--primitive-shadow-1);
    --elevation-2: var(--primitive-shadow-2);
    --elevation-3: var(--primitive-shadow-3);
    --elevation-overlay: var(--primitive-shadow-overlay);
    --elevation-drawer: var(--primitive-shadow-drawer);
    --elevation-glow: var(--primitive-shadow-glow);
  }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE OVERRIDES — aligned with workbench breakpoints
   ═══════════════════════════════════════════════════ */
@media (max-width: 73.75rem) {
  :root {
    --layout-sidebar-width: 13.25rem;
  }
}

@media (max-width: 61.25rem) {
  :root {
    --layout-inspector-width: 0;
    --layout-context-panel-width: 0;
  }
}

@media (max-width: 43.75rem) {
  :root {
    --layout-sidebar-width: 0;
    --layout-page-padding: 1rem;
    --layout-workspace-padding-inline: var(--layout-page-padding);
    --layout-workspace-padding-block-end: 3.5rem;
    --size-control-md: 2.25rem;
  }
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --primitive-duration-fast: 0ms;
    --primitive-duration-standard: 0ms;
    --primitive-duration-slow: 0ms;
    --primitive-duration-reveal: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-standard: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-reveal: 0ms;
  }
}