/* Desktop design owner. Raw Carla desktop colors live ONLY here. Consumers
   use app tokens; panel policy owns widths, foundation owns controls. */
html[data-desktop-shell] {
  --app-font-caption: .6875rem;
  --app-font-small: .75rem;
  --app-font-body: .8125rem;
  --app-font-control: var(--app-font-body);
  --app-font-title: .9375rem;
  --app-font-display: 1.0625rem;
  --app-panel-header-height: 74px;
  --app-panel-header-font-size: var(--app-font-display);
  --app-tool-dock-size: 38px;
  --app-tool-dock-icon-size: 20px;
  --app-tool-dock-radius: 9px;
  --carla-ui-control-height: 38px;
  --carla-ui-radius-sm: 8px;
  --carla-ui-radius-md: 12px;
  --carla-ui-radius-lg: 16px;
  --app-footer-action-min-height: var(--carla-ui-control-height);
  --app-footer-action-radius: var(--carla-ui-radius-sm);
  --app-footer-padding-top: 12px;
  --app-footer-padding-bottom: 12px;
  --app-action-height: var(--carla-ui-control-height);
  --app-action-columns: 20px minmax(0, 1fr) 20px;
  --app-action-radius: var(--carla-ui-radius-sm);
  --app-action-bg: var(--app-control-bg);
  --app-action-fg: var(--app-control-fg);
  --app-action-border: var(--app-control-border);
  --app-action-shadow: none;
  --app-action-decoration: none;
  --app-action-icon-size: 20px;
  --app-action-icon-border: 0;
  --app-action-icon-bg: transparent;
  --app-action-weight: 600;
  --app-action-text-shadow: none;
  --app-action-hover-transform: none;
  --app-action-pressed-transform: none;
  --app-menu-icon-bg: var(--app-primary-soft);
  --app-menu-icon-fg: var(--app-primary);
  --app-menu-icon-shadow: none;
  --dg-text-body: var(--app-text);
  --dg-text-muted: var(--app-text-muted);
  --dg-text-on-dark: var(--app-text);
  --dg-border-muted: var(--app-border);
  --dg-card-dark: var(--app-surface);
  --dg-card-dark-deep: var(--app-surface);

}

html[data-desktop-shell]:not([data-app-appearance="neutral"]) {
  color-scheme: dark;
  --app-page-bg: #131417;
  --app-panel-bg: var(--app-page-bg);
  --app-canvas-bg: var(--app-page-bg);
  --app-sidebar-bg: #1e141c;
  --app-surface: #211e26;
  --app-surface-muted: #2b202b;
  --app-surface-raised: #2e2731;
  --app-header-bg: #ad3067;
  --app-header-fg: #ffffff;
  --app-text: #eeedf1;
  --app-text-muted: #b8abb9;
  --app-text-subtle: #a998aa;
  --app-border: #41333f;
  --app-border-strong: #6d5064;
  --app-primary: #f17bac;
  --app-primary-hover: #f69ac0;
  --app-primary-soft: var(--app-surface-muted);
  --app-primary-fg: #29141f;
  --app-secondary: var(--app-text-muted);
  --app-secondary-soft: var(--app-surface-muted);
  --app-accent: var(--app-primary);
  --app-accent-soft: var(--app-primary-soft);
  --app-danger: #ff9da9;
  --app-danger-hover: #ffbdc5;
  --app-danger-soft: #502737;
  --app-success: #84cbaa;
  --app-success-soft: #203c32;
  --app-action-primary: var(--app-surface-raised);
  --app-action-primary-hover: var(--app-primary-soft);
  --app-neutral-action: var(--app-action-primary);
  --app-neutral-action-hover: var(--app-action-primary-hover);
  --app-control-bg: var(--app-surface-raised);
  --app-control-hover: var(--app-primary-soft);
  --app-control-fg: var(--app-text);
  --app-control-border: var(--app-border-strong);
  --app-control-selected-bg: var(--app-primary-soft);
  --app-control-selected-hover: var(--app-surface-raised);
  --app-control-selected-fg: var(--app-primary);
  --app-control-emphasis-bg: var(--app-control-selected-bg);
  --app-control-emphasis-hover: var(--app-control-selected-hover);
  --app-control-emphasis-fg: var(--app-control-selected-fg);
  --app-input-bg: var(--app-surface);
  --app-input-disabled: var(--app-surface-muted);
  --app-footer-bg: var(--app-surface);
  --app-footer-border: var(--app-border);
  --app-footer-action-bg: var(--app-control-bg);
  --app-footer-action-hover: var(--app-control-hover);
  --app-footer-action-fg: var(--app-text);
  --app-overlay: rgb(0 0 0 / .35);
  --app-shadow-sm: none;
  --app-shadow-md: 0 12px 32px rgb(0 0 0 / .24);
  --app-focus: color-mix(in srgb, var(--app-primary) 24%, transparent);
  --app-user-bubble: #372533;
  --app-user-text: #f8e2ef;
  --app-voice-label-bg: #3e122d;
  --app-voice-label-border: #ef96bd;
}
