/* Shared tokens are valid in Tailwind and plain CSS consumers. */
@property --surface-background {
  syntax: '<color>';
  inherits: true;
  initial-value: Canvas;
}

@property --surface-foreground {
  syntax: '<color>';
  inherits: true;
  initial-value: CanvasText;
}

@property --surface-panel {
  syntax: '<color>';
  inherits: true;
  initial-value: Canvas;
}

@property --surface-muted {
  syntax: '<color>';
  inherits: true;
  initial-value: GrayText;
}

@property --surface-border {
  syntax: '<color>';
  inherits: true;
  initial-value: GrayText;
}

@property --surface-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: Highlight;
}

@property --surface-danger {
  syntax: '<color>';
  inherits: true;
  initial-value: #c73535;
}

@property --surface-warning {
  syntax: '<color>';
  inherits: true;
  initial-value: #a46b00;
}

  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;

    /*
     * Shape and radius are an independent design axis. Palette, mode,
     * density, and material recipes consume these tokens without redefining
     * the semantic intent attached to a component.
     */
    --shape-radius-control: 0.375rem;
    --shape-radius-tile: 0.375rem;
    --shape-radius-field: 0.375rem;
    --shape-radius-row: 0.25rem;
    --shape-radius-content: 0.5rem;
    --shape-radius-dialog: 0.75rem;
    --shape-radius-pill: 999px;
    --shape-radius-circle: 50%;

    /* Mobile Adaptation */
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --tab-bar-height: 56px;
    --app-height: 100dvh;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }

  /* ============================================
     AI Studio Theme System
     Themes: sakura (樱花梦幻), neon (赛博霓虹)
     Default: sakura
     ============================================ */

  /* Base theme variables (default: sakura) */
  :root {
    /* Primary gradient colors */
    --theme-primary-h: 330;
    --theme-primary-s: 80%;
    --theme-primary-l: 65%;
    --theme-secondary-h: 280;
    --theme-secondary-s: 70%;
    --theme-secondary-l: 60%;
    --theme-accent-h: 340;
    --theme-accent-s: 75%;
    --theme-accent-l: 55%;
    /* Palette Identity Recipe: mode owns luminance; palette owns atmosphere. */
    --theme-identity-canvas-h: 326;
    --theme-identity-canvas-s: 18%;
    --theme-identity-surface-h: 320;
    --theme-identity-surface-s: 24%;
    --theme-identity-border-h: 338;
    --theme-identity-border-s: 34%;
    --theme-identity-text-h: 332;
    --theme-identity-text-s: 10%;
    --theme-identity-glow-h: 330;
    --theme-identity-glow-s: 80%;
    --theme-primary-foreground: 0 0% 4%;
    --theme-secondary-foreground: 0 0% 4%;
    --theme-accent-foreground: 0 0% 4%;
    --theme-error-action-foreground: 0 0% 4%;
    --theme-focus-ring: 0 0% 98%;
    --theme-color-intensity-delta: 0%;
    --theme-surface-separation-shift: 0%;
    --theme-surface-separation-strong-shift: 0%;
    --theme-surface-separation-inverse-shift: 0%;
    --theme-surface-separation-strong-inverse-shift: 0%;
    --theme-content-contrast-lighten: 0%;
    --theme-content-contrast-darken: 0%;
    /* Polarity × Luminance Softness projection (dark/crisp fallback). */
    --theme-luminance-softness: 0;
    --theme-luminance-saturation-shift: 0%;
    --theme-luminance-canvas-l: 5%;
    --theme-luminance-surface-l: 10%;
    --theme-luminance-elevated-l: 14%;
    --theme-luminance-muted-surface-l: 7%;
    --theme-luminance-card-l: 8%;
    --theme-luminance-card-border-l: 26%;
    --theme-luminance-border-l: 28%;
    --theme-luminance-input-l: 7%;
    --theme-luminance-input-border-l: 29%;
    --theme-luminance-text-primary-l: 94%;
    --theme-luminance-text-secondary-l: 79%;
    --theme-luminance-text-muted-l: 65%;
    --theme-luminance-placeholder-l: 58%;
    --theme-luminance-focus-ring-l: 94%;
    --theme-luminance-brand-darker-l: 3%;
    --theme-luminance-brand-card-l: 8%;
    --theme-luminance-brand-elevated-l: 11%;
    --theme-glass-clear-alpha: 0.42;
    --theme-glass-regular-alpha: 0.64;
    --theme-glass-strong-alpha: 0.82;
    --theme-glass-content-alpha: 0.95;
    --theme-glass-blur: 22px;
    --theme-glass-saturation: 145%;
    --theme-glass-ambient-alpha: 0.22;

    /* Computed colors */
    --theme-primary: hsl(var(--theme-primary-h) calc(var(--theme-primary-s) + var(--theme-color-intensity-delta)) var(--theme-primary-l));
    --theme-secondary: hsl(var(--theme-secondary-h) calc(var(--theme-secondary-s) + var(--theme-color-intensity-delta)) var(--theme-secondary-l));
    --theme-accent: hsl(var(--theme-accent-h) calc(var(--theme-accent-s) + var(--theme-color-intensity-delta)) var(--theme-accent-l));
    /* Component utilities consume channel-only values through hsl(var(...)). */
    --theme-accent-pink: var(--theme-accent-h) calc(var(--theme-accent-s) + var(--theme-color-intensity-delta)) var(--theme-accent-l);

    /* Surface colors */
    --theme-bg: 240 20% 5%;
    --theme-surface: 260 30% 12%;
    --theme-surface-elevated: 260 25% 16%;
    --theme-surface-muted: 260 35% 8%;

    /* Text colors */
    --theme-text-primary: 0 0% 98%;
    --theme-text-secondary: 280 15% 75%;
    --theme-text-muted: 280 10% 55%;

    /* Card colors (default dark) */
    --theme-card-bg: 260 30% 10%;
    --theme-card-border: 280 25% 20%;

    /* Input colors (default dark) */
    --theme-input-bg: 260 35% 8%;
    --theme-input-border: 280 25% 22%;
    --theme-input-text: 0 0% 95%;
    --theme-input-placeholder: 280 15% 50%;

    /* Border & glow */
    --theme-border: 280 30% 25%;
    --theme-glow: hsl(var(--theme-identity-glow-h) var(--theme-identity-glow-s) var(--theme-primary-l));
    --theme-glow-intensity: 0.3;
    --theme-is-light: 0;

    /* Product identity is independent from destructive/error semantics. */
    --theme-roleplay: var(--theme-error);
    --theme-roleplay-foreground: var(--theme-error-foreground);

    /* === Brand & Functional Colors === */
    /* 这些变量根据主题切换，深色主题使用深色值，浅色主题使用浅色值 */

    /* 品牌背景系列 - HSL格式用于主题切换 */
    --brand-bg-dark: 230 30% 5%;
    /* 深色主题：最深背景 */
    --brand-bg-darker: 228 25% 3%;
    /* 深色主题：更深背景 */
    --brand-bg-card: 232 25% 6%;
    /* 深色主题：卡片背景 */
    --brand-bg-elevated: 230 20% 8%;
    /* 深色主题：浮层背景 */

    /* 品牌粉色系列 (标签高亮) - 默认值，各主题可覆盖 */
    --brand-pink: #ec4899;
    --brand-pink-hover: #f472b6;
    --brand-pink-muted: #be185d;

    /* 品牌紫色系列 (次要强调) */
    --brand-purple: #a855f7;
    --brand-purple-hover: #c084fc;
    --brand-purple-muted: #7c3aed;

    /* 品牌蓝色系列 (链接/交互) */
    --brand-blue: #3b82f6;
    --brand-blue-hover: #60a5fa;

    /* 功能色 - 状态 (保持一致) */
    --func-active: #22c55e;
    --func-inactive: #6b7280;
    --func-pending: #eab308;

    /* ============================================
       Typography Scale (rem-based for accessibility)
       最小可读字号: 11px (--text-xs)
       ============================================ */
    --text-2xs: 0.625rem;
    /* 10px - 仅用于极小标注，尽量避免使用 */
    --text-xs: 0.6875rem;
    /* 11px - 标签、徽章、最小可读字号 */
    --text-sm: 0.75rem;
    /* 12px - 辅助文本 */
    --text-base: 0.8125rem;
    /* 13px - 正文 */
    --text-md: 0.875rem;
    /* 14px - 强调文本 */
    --text-lg: 1rem;
    /* 16px - 标题 */
    --text-xl: 1.125rem;
    /* 18px - 大标题 */

    /* Inspector 语义化字号 */
    --text-inspector-hint: var(--text-xs);
    /* 11px - 提示、注释 */
    --text-inspector-label: var(--text-sm);
    /* 12px - 标签 */
    --text-inspector-value: var(--text-base);
    /* 13px - 数值 */
    --text-inspector-title: var(--text-md);
    /* 14px - 标题 */

    /* Gradient presets */
    --theme-gradient-primary: linear-gradient(135deg,
        hsl(var(--theme-primary-h) calc(var(--theme-primary-s) + var(--theme-color-intensity-delta)) var(--theme-primary-l)),
        hsl(var(--theme-secondary-h) calc(var(--theme-secondary-s) + var(--theme-color-intensity-delta)) var(--theme-secondary-l)));
    --theme-gradient-surface: linear-gradient(180deg,
        hsl(var(--theme-surface)),
        hsl(260 30% 10%));

    /* === ShadcnUI Variable Mapping === */
    /* Map ShadcnUI variables to theme system for component compatibility */
    --background: var(--theme-bg);
    --foreground: var(--theme-text-primary);
    --card: var(--theme-card-bg);
    --card-foreground: var(--theme-text-primary);
    --popover: var(--theme-surface-elevated);
    --popover-foreground: var(--theme-text-primary);
    --primary: var(--theme-primary-h) calc(var(--theme-primary-s) + var(--theme-color-intensity-delta)) var(--theme-primary-l);
    --primary-foreground: var(--theme-primary-foreground);
    --secondary: var(--theme-secondary-h) calc(var(--theme-secondary-s) + var(--theme-color-intensity-delta)) var(--theme-secondary-l);
    --secondary-foreground: var(--theme-secondary-foreground);
    --muted: var(--theme-surface-muted);
    --muted-foreground: var(--theme-text-muted);
    --accent: var(--theme-accent-h) calc(var(--theme-accent-s) + var(--theme-color-intensity-delta)) var(--theme-accent-l);
    --accent-foreground: var(--theme-accent-foreground);
    --destructive: var(--theme-error);
    --destructive-foreground: var(--theme-error-action-foreground);
    --border: var(--theme-border);
    --input: var(--theme-input-border);
    --ring: var(--theme-focus-ring);
  }

  /* 🌸 Sakura Dream Theme (Default) */
  [data-theme="sakura"],
  :root:not([data-theme]) {
    --theme-primary-h: 330;
    --theme-primary-s: 80%;
    --theme-primary-l: 65%;
    --theme-secondary-h: 280;
    --theme-secondary-s: 70%;
    --theme-secondary-l: 60%;
    --theme-accent-h: 340;
    --theme-accent-s: 75%;
    --theme-accent-l: 55%;
    --theme-identity-canvas-h: 326;
    --theme-identity-canvas-s: 18%;
    --theme-identity-surface-h: 320;
    --theme-identity-surface-s: 24%;
    --theme-identity-border-h: 338;
    --theme-identity-border-s: 34%;
    --theme-identity-text-h: 332;
    --theme-identity-text-s: 10%;
    --theme-identity-glow-h: 330;
    --theme-identity-glow-s: 80%;
    --theme-primary-foreground: 0 0% 4%;
    --theme-secondary-foreground: 0 0% 4%;
    --theme-accent-foreground: 0 0% 4%;
    --theme-error-action-foreground: 0 0% 4%;
    --theme-focus-ring: 0 0% 98%;

    --theme-bg: 300 45% 4%;
    --theme-surface: 290 40% 10%;
    --theme-surface-elevated: 285 35% 14%;
    --theme-surface-muted: 295 50% 6%;

    --theme-border: 320 45% 30%;
    --theme-glow-intensity: 0.35;

    /* 文字色彩 - 增强对比度 */
    --theme-text-primary: 0 0% 98%;
    --theme-text-secondary: 330 30% 82%;
    --theme-text-muted: 320 25% 68%;

    /* 卡片 - 增强粉紫特色 */
    --theme-card-bg: 290 35% 8%;
    --theme-card-border: 320 40% 25%;

    /* 输入框 */
    --theme-input-bg: 290 40% 6%;
    --theme-input-border: 320 35% 28%;
    --theme-input-text: 0 0% 98%;
    --theme-input-placeholder: 320 25% 58%;

    /* 状态色 */
    --theme-success: 150 70% 45%;
    --theme-warning: 40 90% 50%;
    --theme-error: 0 75% 55%;
    --theme-info: 210 80% 55%;
    --theme-success-foreground: 150 70% 45%;
    --theme-warning-foreground: 40 90% 50%;
    --theme-error-foreground: 0 75% 65%;
    --theme-info-foreground: 210 80% 55%;

    /* 品牌粉色 - 樱花粉 */
    --brand-pink: #ec4899;
    --brand-pink-hover: #f472b6;
    --brand-pink-muted: #be185d;

    --theme-is-light: 0;
  }

  /* 🌟 Cyber Neon Theme */
  [data-theme="neon"] {
    --theme-primary-h: 272;
    --theme-primary-s: 92%;
    --theme-primary-l: 61%;
    --theme-secondary-h: 182;
    --theme-secondary-s: 88%;
    --theme-secondary-l: 48%;
    --theme-accent-h: 305;
    --theme-accent-s: 84%;
    --theme-accent-l: 58%;
    --theme-identity-canvas-h: 238;
    --theme-identity-canvas-s: 10%;
    --theme-identity-surface-h: 252;
    --theme-identity-surface-s: 22%;
    --theme-identity-border-h: 184;
    --theme-identity-border-s: 55%;
    --theme-identity-text-h: 190;
    --theme-identity-text-s: 8%;
    --theme-identity-glow-h: 182;
    --theme-identity-glow-s: 90%;
    --theme-primary-foreground: 0 0% 100%;
    --theme-secondary-foreground: 0 0% 4%;
    --theme-accent-foreground: 0 0% 4%;
    --theme-error-action-foreground: 0 0% 4%;
    --theme-focus-ring: 180 100% 95%;

    --theme-bg: 270 50% 3%;
    --theme-surface: 260 45% 8%;
    --theme-surface-elevated: 255 40% 12%;
    --theme-surface-muted: 265 55% 5%;

    --theme-border: 180 70% 35%;
    --theme-glow-intensity: 0.52;

    /* 文字色彩 - 霓虹青色调 */
    --theme-text-primary: 180 100% 95%;
    --theme-text-secondary: 200 50% 80%;
    --theme-text-muted: 180 40% 65%;

    /* 卡片 - 深紫配霓虹边框 */
    --theme-card-bg: 265 45% 6%;
    --theme-card-border: 280 60% 35%;

    /* 输入框 */
    --theme-input-bg: 265 50% 5%;
    --theme-input-border: 180 50% 30%;
    --theme-input-text: 180 80% 95%;
    --theme-input-placeholder: 180 40% 55%;

    /* 状态色 */
    --theme-success: 150 70% 45%;
    --theme-warning: 40 90% 50%;
    --theme-error: 0 75% 55%;
    --theme-info: 210 80% 55%;
    --theme-success-foreground: 150 70% 45%;
    --theme-warning-foreground: 40 90% 50%;
    --theme-error-foreground: 0 75% 65%;
    --theme-info-foreground: 210 80% 55%;

    /* 品牌粉色 - 霓虹品红 */
    --brand-pink: #ff2d95;
    --brand-pink-hover: #ff6eb4;
    --brand-pink-muted: #c2185b;

    --theme-is-light: 0;
  }

  /* 🔥 Ember Glow Theme */
  [data-theme="ember"] {
    --theme-primary-h: 24;
    --theme-primary-s: 96%;
    --theme-primary-l: 55%;
    --theme-secondary-h: 2;
    --theme-secondary-s: 82%;
    --theme-secondary-l: 49%;
    --theme-accent-h: 40;
    --theme-accent-s: 90%;
    --theme-accent-l: 50%;
    --theme-identity-canvas-h: 8;
    --theme-identity-canvas-s: 24%;
    --theme-identity-surface-h: 12;
    --theme-identity-surface-s: 28%;
    --theme-identity-border-h: 20;
    --theme-identity-border-s: 42%;
    --theme-identity-text-h: 28;
    --theme-identity-text-s: 10%;
    --theme-identity-glow-h: 16;
    --theme-identity-glow-s: 92%;
    --theme-primary-foreground: 0 0% 4%;
    --theme-secondary-foreground: 0 0% 100%;
    --theme-accent-foreground: 0 0% 4%;
    --theme-error-action-foreground: 0 0% 4%;
    --theme-focus-ring: 30 100% 96%;

    --theme-bg: 10 55% 4%;
    --theme-surface: 12 50% 9%;
    --theme-surface-elevated: 15 45% 13%;
    --theme-surface-muted: 8 60% 5%;

    --theme-border: 25 70% 35%;
    --theme-glow-intensity: 0.46;

    /* 文字色彩 - 暖橙色调 */
    --theme-text-primary: 30 100% 96%;
    --theme-text-secondary: 35 50% 82%;
    --theme-text-muted: 30 45% 68%;

    /* 卡片 - 火焰橙红特色 */
    --theme-card-bg: 10 50% 7%;
    --theme-card-border: 25 65% 30%;

    /* 输入框 */
    --theme-input-bg: 10 55% 5%;
    --theme-input-border: 25 55% 32%;
    --theme-input-text: 35 90% 96%;
    --theme-input-placeholder: 25 40% 55%;

    /* 状态色 */
    --theme-success: 150 70% 45%;
    --theme-warning: 40 90% 50%;
    --theme-error: 0 75% 55%;
    --theme-info: 210 80% 55%;
    --theme-success-foreground: 150 70% 45%;
    --theme-warning-foreground: 40 90% 50%;
    --theme-error-foreground: 0 75% 65%;
    --theme-info-foreground: 210 80% 55%;

    /* 品牌粉色 - 暖珊瑚 */
    --brand-pink: #ef6c6c;
    --brand-pink-hover: #f48f8f;
    --brand-pink-muted: #c0392b;

    --theme-is-light: 0;
  }

  /* 🌙 Midnight Blues Theme */
  [data-theme="midnight"] {
    --theme-primary-h: 224;
    --theme-primary-s: 78%;
    --theme-primary-l: 56%;
    --theme-secondary-h: 248;
    --theme-secondary-s: 66%;
    --theme-secondary-l: 60%;
    --theme-accent-h: 205;
    --theme-accent-s: 82%;
    --theme-accent-l: 50%;
    --theme-identity-canvas-h: 228;
    --theme-identity-canvas-s: 22%;
    --theme-identity-surface-h: 224;
    --theme-identity-surface-s: 26%;
    --theme-identity-border-h: 214;
    --theme-identity-border-s: 34%;
    --theme-identity-text-h: 214;
    --theme-identity-text-s: 10%;
    --theme-identity-glow-h: 218;
    --theme-identity-glow-s: 78%;
    --theme-primary-foreground: 0 0% 100%;
    --theme-secondary-foreground: 0 0% 100%;
    --theme-accent-foreground: 0 0% 4%;
    --theme-error-action-foreground: 0 0% 4%;
    --theme-focus-ring: 210 100% 97%;

    --theme-bg: 230 60% 4%;
    --theme-surface: 225 55% 9%;
    --theme-surface-elevated: 220 50% 13%;
    --theme-surface-muted: 235 65% 5%;

    --theme-border: 215 55% 35%;
    --theme-glow-intensity: 0.36;

    /* 文字色彩 - 冷蓝色调 */
    --theme-text-primary: 210 100% 97%;
    --theme-text-secondary: 205 45% 82%;
    --theme-text-muted: 215 40% 68%;

    /* 卡片 - 深邃蓝夜特色 */
    --theme-card-bg: 228 55% 7%;
    --theme-card-border: 210 50% 30%;

    /* 输入框 */
    --theme-input-bg: 230 60% 5%;
    --theme-input-border: 210 45% 32%;
    --theme-input-text: 200 80% 96%;
    --theme-input-placeholder: 215 35% 55%;

    /* 状态色 */
    --theme-success: 150 70% 45%;
    --theme-warning: 40 90% 50%;
    --theme-error: 0 75% 55%;
    --theme-info: 210 80% 55%;
    --theme-success-foreground: 150 70% 45%;
    --theme-warning-foreground: 40 90% 50%;
    --theme-error-foreground: 0 75% 65%;
    --theme-info-foreground: 210 80% 55%;

    /* 品牌粉色 - 冰蓝紫 */
    --brand-pink: #a78bfa;
    --brand-pink-hover: #c4b5fd;
    --brand-pink-muted: #7c3aed;

    --theme-is-light: 0;
  }

  /* 🌿 Forest Calm Theme */
  [data-theme="forest"] {
    --theme-primary-h: 150;
    --theme-primary-s: 70%;
    --theme-primary-l: 45%;
    --theme-secondary-h: 180;
    --theme-secondary-s: 65%;
    --theme-secondary-l: 40%;
    --theme-accent-h: 120;
    --theme-accent-s: 60%;
    --theme-accent-l: 50%;
    --theme-identity-canvas-h: 154;
    --theme-identity-canvas-s: 16%;
    --theme-identity-surface-h: 150;
    --theme-identity-surface-s: 18%;
    --theme-identity-border-h: 142;
    --theme-identity-border-s: 28%;
    --theme-identity-text-h: 145;
    --theme-identity-text-s: 9%;
    --theme-identity-glow-h: 156;
    --theme-identity-glow-s: 70%;
    --theme-primary-foreground: 0 0% 4%;
    --theme-secondary-foreground: 0 0% 4%;
    --theme-accent-foreground: 0 0% 4%;
    --theme-error-action-foreground: 0 0% 4%;
    --theme-focus-ring: 120 80% 96%;

    --theme-bg: 155 55% 3%;
    --theme-surface: 150 50% 8%;
    --theme-surface-elevated: 145 45% 12%;
    --theme-surface-muted: 160 60% 4%;

    --theme-border: 140 50% 28%;
    --theme-glow-intensity: 0.35;

    /* 文字色彩 - 翠绿色调 */
    --theme-text-primary: 120 80% 96%;
    --theme-text-secondary: 140 40% 80%;
    --theme-text-muted: 145 35% 65%;

    /* 卡片 - 森林绿特色 */
    --theme-card-bg: 155 50% 6%;
    --theme-card-border: 135 45% 24%;

    /* 输入框 */
    --theme-input-bg: 155 55% 4%;
    --theme-input-border: 140 40% 26%;
    --theme-input-text: 130 70% 95%;
    --theme-input-placeholder: 145 30% 52%;

    /* 状态色 */
    --theme-success: 150 70% 45%;
    --theme-warning: 40 90% 50%;
    --theme-error: 0 75% 55%;
    --theme-info: 210 80% 55%;
    --theme-success-foreground: 150 70% 45%;
    --theme-warning-foreground: 40 90% 50%;
    --theme-error-foreground: 0 75% 65%;
    --theme-info-foreground: 210 80% 55%;

    /* 品牌粉色 - 翡翠粉 */
    --brand-pink: #f0abfc;
    --brand-pink-hover: #f5d0fe;
    --brand-pink-muted: #a855f7;

    --theme-is-light: 0;
  }

  /* ============================================ */
  /* ========== 🌤️ LIGHT THEMES ================ */
  /* ============================================ */

  /* ☁️ Cloud White Theme - 纯净云白 */
  [data-theme="cloud"] {
    --theme-primary-h: 190;
    --theme-primary-s: 82%;
    --theme-primary-l: 48%;
    --theme-secondary-h: 210;
    --theme-secondary-s: 68%;
    --theme-secondary-l: 58%;
    --theme-accent-h: 180;
    --theme-accent-s: 72%;
    --theme-accent-l: 44%;
    --theme-identity-canvas-h: 205;
    --theme-identity-canvas-s: 1%;
    --theme-identity-surface-h: 200;
    --theme-identity-surface-s: 3%;
    --theme-identity-border-h: 195;
    --theme-identity-border-s: 12%;
    --theme-identity-text-h: 210;
    --theme-identity-text-s: 4%;
    --theme-identity-glow-h: 190;
    --theme-identity-glow-s: 65%;
    --theme-primary-foreground: 0 0% 4%;
    --theme-secondary-foreground: 0 0% 4%;
    --theme-accent-foreground: 0 0% 4%;
    --theme-error-action-foreground: 0 0% 100%;
    --theme-focus-ring: 215 60% 18%;

    /* 背景 - 明显的淡蓝调 */
    --theme-bg: 210 50% 97%;
    --theme-surface: 205 45% 93%;
    --theme-surface-elevated: 210 40% 99%;
    --theme-surface-muted: 215 55% 90%;

    /* 边框 - 蓝色特色 */
    --theme-border: 210 45% 78%;
    --theme-glow-intensity: 0.2;

    /* 文字 - 深蓝色调 */
    --theme-text-primary: 215 60% 18%;
    --theme-text-secondary: 210 42% 32%;
    --theme-text-muted: 210 30% 38%;

    /* 卡片 - 白色配蓝边框 */
    --theme-card-bg: 210 30% 99%;
    --theme-card-border: 210 40% 82%;

    /* 输入框 */
    --theme-input-bg: 210 25% 99%;
    --theme-input-border: 210 45% 78%;
    --theme-input-text: 215 55% 18%;
    --theme-input-placeholder: 210 26% 44%;

    /* 状态色 */
    --theme-success: 150 70% 32%;
    --theme-warning: 35 90% 34%;
    --theme-error: 0 75% 44%;
    --theme-info: 210 85% 42%;
    --theme-success-foreground: 150 70% 24%;
    --theme-warning-foreground: 35 90% 26%;
    --theme-error-foreground: 0 75% 38%;
    --theme-info-foreground: 210 85% 36%;

    /* 品牌背景色 - 浅色覆盖 */
    --brand-bg-dark: 210 50% 97%;
    --brand-bg-darker: 210 45% 95%;
    --brand-bg-card: 210 30% 99%;
    --brand-bg-elevated: 210 25% 100%;

    /* 品牌粉色 - 深粉 */
    --brand-pink: #db2777;
    --brand-pink-hover: #ec4899;
    --brand-pink-muted: #9d174d;

    --theme-is-light: 1;
  }

  /* 🌅 Dawn Warmth Theme - 晨曦暖阳 */
  [data-theme="dawn"] {
    --theme-primary-h: 48;
    --theme-primary-s: 92%;
    --theme-primary-l: 52%;
    --theme-secondary-h: 18;
    --theme-secondary-s: 80%;
    --theme-secondary-l: 62%;
    --theme-accent-h: 58;
    --theme-accent-s: 88%;
    --theme-accent-l: 48%;
    --theme-identity-canvas-h: 48;
    --theme-identity-canvas-s: 10%;
    --theme-identity-surface-h: 52;
    --theme-identity-surface-s: 16%;
    --theme-identity-border-h: 45;
    --theme-identity-border-s: 28%;
    --theme-identity-text-h: 34;
    --theme-identity-text-s: 8%;
    --theme-identity-glow-h: 50;
    --theme-identity-glow-s: 84%;
    --theme-primary-foreground: 0 0% 4%;
    --theme-secondary-foreground: 0 0% 4%;
    --theme-accent-foreground: 0 0% 4%;
    --theme-error-action-foreground: 0 0% 100%;
    --theme-focus-ring: 28 55% 15%;

    /* 背景 - 明显的暖橙色调 */
    --theme-bg: 38 60% 96%;
    --theme-surface: 35 55% 92%;
    --theme-surface-elevated: 40 50% 98%;
    --theme-surface-muted: 32 65% 88%;

    /* 边框 - 橙色特色 */
    --theme-border: 32 55% 75%;
    --theme-glow-intensity: 0.24;

    /* 文字 - 暗棕色调 */
    --theme-text-primary: 28 55% 15%;
    --theme-text-secondary: 30 34% 30%;
    --theme-text-muted: 28 28% 38%;

    /* 卡片 - 淡橙色背景 */
    --theme-card-bg: 40 45% 98%;
    --theme-card-border: 32 45% 78%;

    /* 输入框 */
    --theme-input-bg: 42 40% 99%;
    --theme-input-border: 32 50% 75%;
    --theme-input-text: 28 50% 15%;
    --theme-input-placeholder: 30 22% 43%;

    /* 状态色 */
    --theme-success: 145 65% 32%;
    --theme-warning: 42 95% 34%;
    --theme-error: 5 75% 44%;
    --theme-info: 205 80% 42%;
    --theme-success-foreground: 145 65% 24%;
    --theme-warning-foreground: 42 95% 26%;
    --theme-error-foreground: 5 75% 38%;
    --theme-info-foreground: 205 80% 36%;

    /* 品牌背景色 - 浅色覆盖 */
    --brand-bg-dark: 38 60% 96%;
    --brand-bg-darker: 35 55% 93%;
    --brand-bg-card: 40 45% 98%;
    --brand-bg-elevated: 42 40% 99%;

    /* 品牌粉色 - 暖调深粉 */
    --brand-pink: #e11d48;
    --brand-pink-hover: #f43f5e;
    --brand-pink-muted: #9f1239;

    --theme-is-light: 1;
  }

  /* 💜 Lavender Mist Theme - 薰衣草雾 */
  [data-theme="lavender"] {
    --theme-primary-h: 282;
    --theme-primary-s: 68%;
    --theme-primary-l: 51%;
    --theme-secondary-h: 318;
    --theme-secondary-s: 54%;
    --theme-secondary-l: 64%;
    --theme-accent-h: 262;
    --theme-accent-s: 65%;
    --theme-accent-l: 56%;
    --theme-identity-canvas-h: 286;
    --theme-identity-canvas-s: 7%;
    --theme-identity-surface-h: 282;
    --theme-identity-surface-s: 12%;
    --theme-identity-border-h: 286;
    --theme-identity-border-s: 22%;
    --theme-identity-text-h: 282;
    --theme-identity-text-s: 7%;
    --theme-identity-glow-h: 300;
    --theme-identity-glow-s: 55%;
    --theme-primary-foreground: 0 0% 100%;
    --theme-secondary-foreground: 0 0% 4%;
    --theme-accent-foreground: 0 0% 100%;
    --theme-error-action-foreground: 0 0% 100%;
    --theme-focus-ring: 280 50% 18%;

    /* 背景 - 明显的淡紫色调 */
    --theme-bg: 285 55% 96%;
    --theme-surface: 280 50% 92%;
    --theme-surface-elevated: 285 45% 98%;
    --theme-surface-muted: 278 60% 88%;

    /* 边框 - 紫色特色 */
    --theme-border: 280 45% 78%;
    --theme-glow-intensity: 0.22;

    /* 文字 - 深紫色调 */
    --theme-text-primary: 280 50% 18%;
    --theme-text-secondary: 278 36% 33%;
    --theme-text-muted: 280 24% 38%;

    /* 卡片 - 紫色特色 */
    --theme-card-bg: 285 40% 98%;
    --theme-card-border: 280 40% 82%;

    /* 输入框 */
    --theme-input-bg: 285 35% 99%;
    --theme-input-border: 280 45% 78%;
    --theme-input-text: 280 48% 18%;
    --theme-input-placeholder: 280 22% 45%;

    /* 状态色 */
    --theme-success: 148 65% 32%;
    --theme-warning: 38 88% 34%;
    --theme-error: 355 75% 44%;
    --theme-info: 215 80% 42%;
    --theme-success-foreground: 148 65% 24%;
    --theme-warning-foreground: 38 88% 26%;
    --theme-error-foreground: 355 75% 38%;
    --theme-info-foreground: 215 80% 36%;

    /* 品牌背景色 - 浅色覆盖 */
    --brand-bg-dark: 285 55% 96%;
    --brand-bg-darker: 280 50% 93%;
    --brand-bg-card: 285 40% 98%;
    --brand-bg-elevated: 285 35% 99%;

    /* 品牌粉色 - 薰衣草紫粉 */
    --brand-pink: #c026d3;
    --brand-pink-hover: #d946ef;
    --brand-pink-muted: #86198f;

    --theme-is-light: 1;
  }

  /*
   * Runtime Mode Axis. Accent palettes provide hue/personality; Mode owns
   * luminance. The presence selector is intentionally repeated so the mode
   * axis outranks the legacy `:root:not([data-theme])` default-preset selector.
   */
  [data-theme-mode][data-theme-mode="dark"] {
    --theme-bg: var(--theme-identity-canvas-h) calc(var(--theme-identity-canvas-s) + var(--theme-color-intensity-delta)) 5%;
    --theme-surface: var(--theme-identity-surface-h) calc(var(--theme-identity-surface-s) + var(--theme-color-intensity-delta)) calc(10% + var(--theme-surface-separation-shift));
    --theme-surface-elevated: var(--theme-identity-surface-h) calc(var(--theme-identity-surface-s) - 2% + var(--theme-color-intensity-delta)) calc(14% + var(--theme-surface-separation-strong-shift));
    --theme-surface-muted: var(--theme-identity-canvas-h) calc(var(--theme-identity-canvas-s) + var(--theme-color-intensity-delta)) calc(7% + var(--theme-surface-separation-shift));
    --theme-card-bg: var(--theme-identity-surface-h) calc(var(--theme-identity-surface-s) - 2% + var(--theme-color-intensity-delta)) calc(8% + var(--theme-surface-separation-shift));
    --theme-card-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) + var(--theme-color-intensity-delta)) calc(26% + var(--theme-surface-separation-strong-shift));
    --theme-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) - 4% + var(--theme-color-intensity-delta)) calc(28% + var(--theme-surface-separation-strong-shift));
    --theme-input-bg: var(--theme-identity-canvas-h) calc(var(--theme-identity-canvas-s) + var(--theme-color-intensity-delta)) calc(7% + var(--theme-surface-separation-shift));
    --theme-input-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) - 3% + var(--theme-color-intensity-delta)) calc(29% + var(--theme-surface-separation-strong-shift));
    --theme-text-primary: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(94% + var(--theme-content-contrast-lighten));
    --theme-text-secondary: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 2%) calc(79% + var(--theme-content-contrast-lighten));
    --theme-text-muted: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(65% + var(--theme-content-contrast-lighten));
    --theme-input-text: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(94% + var(--theme-content-contrast-lighten));
    --theme-input-placeholder: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(58% + var(--theme-content-contrast-lighten));
    --theme-focus-ring: var(--theme-identity-glow-h) calc(var(--theme-identity-glow-s) - 45%) 94%;
    --brand-bg-dark: var(--theme-identity-canvas-h) var(--theme-identity-canvas-s) 5%;
    --brand-bg-darker: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) - 2%)) 3%;
    --brand-bg-card: var(--theme-identity-surface-h) calc(var(--theme-identity-surface-s) - 2%) 8%;
    --brand-bg-elevated: var(--theme-identity-surface-h) calc(var(--theme-identity-surface-s) - 3%) 11%;
    --theme-is-light: 0;
  }

  [data-theme-mode][data-theme-mode="dim"] {
    --theme-bg: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) - 3% + var(--theme-color-intensity-delta))) 14%;
    --theme-surface: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 3% + var(--theme-color-intensity-delta))) calc(18% + var(--theme-surface-separation-shift));
    --theme-surface-elevated: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 4% + var(--theme-color-intensity-delta))) calc(22% + var(--theme-surface-separation-strong-shift));
    --theme-surface-muted: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) - 4% + var(--theme-color-intensity-delta))) calc(16% + var(--theme-surface-separation-shift));
    --theme-card-bg: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 4% + var(--theme-color-intensity-delta))) calc(17% + var(--theme-surface-separation-shift));
    --theme-card-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) - 4% + var(--theme-color-intensity-delta)) calc(30% + var(--theme-surface-separation-strong-shift));
    --theme-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) - 6% + var(--theme-color-intensity-delta)) calc(31% + var(--theme-surface-separation-strong-shift));
    --theme-input-bg: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) - 3% + var(--theme-color-intensity-delta))) calc(16% + var(--theme-surface-separation-shift));
    --theme-input-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) - 5% + var(--theme-color-intensity-delta)) calc(31% + var(--theme-surface-separation-strong-shift));
    --theme-text-primary: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(89% + var(--theme-content-contrast-lighten));
    --theme-text-secondary: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 1%) calc(74% + var(--theme-content-contrast-lighten));
    --theme-text-muted: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(66% + var(--theme-content-contrast-lighten));
    --theme-input-text: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(89% + var(--theme-content-contrast-lighten));
    --theme-input-placeholder: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(66% + var(--theme-content-contrast-lighten));
    --theme-focus-ring: var(--theme-identity-glow-h) calc(var(--theme-identity-glow-s) - 50%) 88%;
    --brand-bg-dark: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) - 3%)) 14%;
    --brand-bg-darker: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) - 4%)) 12%;
    --brand-bg-card: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 4%)) 17%;
    --brand-bg-elevated: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 4%)) 21%;
    --theme-is-light: 0;
  }

  [data-theme-mode][data-theme-mode="light"] {
    --theme-bg: var(--theme-identity-canvas-h) calc(var(--theme-identity-canvas-s) + var(--theme-color-intensity-delta)) 97%;
    --theme-surface: var(--theme-identity-surface-h) calc(var(--theme-identity-surface-s) + var(--theme-color-intensity-delta)) calc(93% + var(--theme-surface-separation-inverse-shift));
    --theme-surface-elevated: var(--theme-identity-surface-h) calc(var(--theme-identity-surface-s) - 2% + var(--theme-color-intensity-delta)) calc(99% + var(--theme-surface-separation-strong-inverse-shift));
    --theme-surface-muted: var(--theme-identity-canvas-h) calc(var(--theme-identity-canvas-s) + 4% + var(--theme-color-intensity-delta)) calc(90% + var(--theme-surface-separation-inverse-shift));
    --theme-card-bg: var(--theme-identity-surface-h) calc(var(--theme-identity-surface-s) - 3% + var(--theme-color-intensity-delta)) calc(99% + var(--theme-surface-separation-inverse-shift));
    --theme-card-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) - 4% + var(--theme-color-intensity-delta)) calc(82% + var(--theme-surface-separation-strong-inverse-shift));
    --theme-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) - 6% + var(--theme-color-intensity-delta)) calc(78% + var(--theme-surface-separation-strong-inverse-shift));
    --theme-input-bg: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 4% + var(--theme-color-intensity-delta))) 99%;
    --theme-input-border: var(--theme-identity-border-h) calc(var(--theme-identity-border-s) - 6% + var(--theme-color-intensity-delta)) calc(78% + var(--theme-surface-separation-strong-inverse-shift));
    --theme-text-primary: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 10%) calc(18% + var(--theme-content-contrast-darken));
    --theme-text-secondary: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 7%) calc(33% + var(--theme-content-contrast-darken));
    --theme-text-muted: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 3%) calc(38% + var(--theme-content-contrast-darken));
    --theme-input-text: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 10%) calc(18% + var(--theme-content-contrast-darken));
    --theme-input-placeholder: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 2%) calc(42% + var(--theme-content-contrast-darken));
    --theme-focus-ring: var(--theme-identity-glow-h) calc(var(--theme-identity-glow-s) - 40%) 20%;
    --brand-bg-dark: var(--theme-identity-canvas-h) var(--theme-identity-canvas-s) 97%;
    --brand-bg-darker: var(--theme-identity-canvas-h) var(--theme-identity-canvas-s) 95%;
    --brand-bg-card: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 3%)) 99%;
    --brand-bg-elevated: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 4%)) 100%;
    --theme-is-light: 1;
  }

  /*
   * Polarity × Luminance Softness authority. The legacy Mode blocks above
   * remain as compatibility fallbacks for isolated scopes that have not yet
   * adopted the v2 tone contract.
   */
  [data-theme-polarity][data-theme-polarity="dark"] {
    --theme-bg: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) var(--theme-luminance-canvas-l);
    --theme-surface: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-surface-l) + var(--theme-surface-separation-shift));
    --theme-surface-elevated: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 2% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-elevated-l) + var(--theme-surface-separation-strong-shift));
    --theme-surface-muted: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-muted-surface-l) + var(--theme-surface-separation-shift));
    --theme-card-bg: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 2% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-card-l) + var(--theme-surface-separation-shift));
    --theme-card-border: var(--theme-identity-border-h) max(0%, calc(var(--theme-identity-border-s) + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-card-border-l) + var(--theme-surface-separation-strong-shift));
    --theme-border: var(--theme-identity-border-h) max(0%, calc(var(--theme-identity-border-s) - 4% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-border-l) + var(--theme-surface-separation-strong-shift));
    --theme-input-bg: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-input-l) + var(--theme-surface-separation-shift));
    --theme-input-border: var(--theme-identity-border-h) max(0%, calc(var(--theme-identity-border-s) - 3% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-input-border-l) + var(--theme-surface-separation-strong-shift));
    --theme-text-primary: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(var(--theme-luminance-text-primary-l) + var(--theme-content-contrast-lighten));
    --theme-text-secondary: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 2%) calc(var(--theme-luminance-text-secondary-l) + var(--theme-content-contrast-lighten));
    --theme-text-muted: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(var(--theme-luminance-text-muted-l) + var(--theme-content-contrast-lighten));
    --theme-input-text: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(var(--theme-luminance-text-primary-l) + var(--theme-content-contrast-lighten));
    --theme-input-placeholder: var(--theme-identity-text-h) var(--theme-identity-text-s) calc(var(--theme-luminance-placeholder-l) + var(--theme-content-contrast-lighten));
    --theme-focus-ring: var(--theme-identity-glow-h) calc(var(--theme-identity-glow-s) - 45%) var(--theme-luminance-focus-ring-l);
    --brand-bg-dark: var(--theme-identity-canvas-h) var(--theme-identity-canvas-s) var(--theme-luminance-canvas-l);
    --brand-bg-darker: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) - 2%)) var(--theme-luminance-brand-darker-l);
    --brand-bg-card: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 2%)) var(--theme-luminance-brand-card-l);
    --brand-bg-elevated: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 3%)) var(--theme-luminance-brand-elevated-l);
    --theme-is-light: 0;
  }

  [data-theme-polarity][data-theme-polarity="light"] {
    --theme-bg: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) var(--theme-luminance-canvas-l);
    --theme-surface: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-surface-l) + var(--theme-surface-separation-inverse-shift));
    --theme-surface-elevated: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 2% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-elevated-l) + var(--theme-surface-separation-strong-inverse-shift));
    --theme-surface-muted: var(--theme-identity-canvas-h) max(0%, calc(var(--theme-identity-canvas-s) + 4% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-muted-surface-l) + var(--theme-surface-separation-inverse-shift));
    --theme-card-bg: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 3% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-card-l) + var(--theme-surface-separation-inverse-shift));
    --theme-card-border: var(--theme-identity-border-h) max(0%, calc(var(--theme-identity-border-s) - 4% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-card-border-l) + var(--theme-surface-separation-strong-inverse-shift));
    --theme-border: var(--theme-identity-border-h) max(0%, calc(var(--theme-identity-border-s) - 6% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-border-l) + var(--theme-surface-separation-strong-inverse-shift));
    --theme-input-bg: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 4% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) var(--theme-luminance-input-l);
    --theme-input-border: var(--theme-identity-border-h) max(0%, calc(var(--theme-identity-border-s) - 6% + var(--theme-luminance-saturation-shift) + var(--theme-color-intensity-delta))) calc(var(--theme-luminance-input-border-l) + var(--theme-surface-separation-strong-inverse-shift));
    --theme-text-primary: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 10%) calc(var(--theme-luminance-text-primary-l) + var(--theme-content-contrast-darken));
    /* Bound low-emphasis text independently of the primary-text tuning axis.
     * Light/soft surfaces can darken while contentContrast is reduced. Couple
     * muted text to that separation shift so the combined controls retain AA.
     * Stronger contrast remains available; these caps only prevent lightening
     * past the governed text-pair boundary (including all softness samples).
     */
    --theme-text-secondary: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 7%) calc(var(--theme-luminance-text-secondary-l) + min(2%, var(--theme-content-contrast-darken)));
    --theme-text-muted: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 3%) min(calc(var(--theme-luminance-text-muted-l) + var(--theme-content-contrast-darken)), calc(var(--theme-luminance-text-muted-l) - 1% + min(0%, var(--theme-surface-separation-inverse-shift))));
    --theme-input-text: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 10%) calc(var(--theme-luminance-text-primary-l) + var(--theme-content-contrast-darken));
    --theme-input-placeholder: var(--theme-identity-text-h) calc(var(--theme-identity-text-s) + 2%) min(calc(var(--theme-luminance-placeholder-l) + var(--theme-content-contrast-darken)), var(--theme-luminance-placeholder-l));
    --theme-focus-ring: var(--theme-identity-glow-h) calc(var(--theme-identity-glow-s) - 40%) var(--theme-luminance-focus-ring-l);
    --brand-bg-dark: var(--theme-identity-canvas-h) var(--theme-identity-canvas-s) var(--theme-luminance-canvas-l);
    --brand-bg-darker: var(--theme-identity-canvas-h) var(--theme-identity-canvas-s) var(--theme-luminance-brand-darker-l);
    --brand-bg-card: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 3%)) var(--theme-luminance-brand-card-l);
    --brand-bg-elevated: var(--theme-identity-surface-h) max(0%, calc(var(--theme-identity-surface-s) - 4%)) var(--theme-luminance-brand-elevated-l);
    --theme-is-light: 1;
  }

  :root {
    --status-success: 142 69% 45%;
    --status-success-foreground: 142 76% 88%;
    --status-warning: 38 92% 50%;
    --status-warning-foreground: 42 100% 88%;
    --status-danger: 0 72% 55%;
    --status-danger-foreground: 0 86% 92%;
    --status-info: 210 90% 60%;
    --status-info-foreground: 210 100% 92%;
    --status-neutral: 215 14% 56%;
    --status-neutral-foreground: 215 20% 90%;
    --surface-radius: var(--shape-radius-control);
    --surface-control-height: 34px;
    --surface-row-height: 40px;
    --surface-panel-gap: 12px;
  }

  [data-theme-mode][data-theme-mode='light'],
  [data-theme-polarity][data-theme-polarity='light'] {
    --status-success-foreground: 142 72% 20%;
    --status-warning-foreground: 31 90% 20%;
    --status-danger-foreground: 0 72% 24%;
    --status-info-foreground: 212 75% 24%;
    --status-neutral-foreground: 215 25% 28%;
  }

  /* Rebind channel aliases when a governed nested scope changes its theme. */
  :where([data-theme], [data-theme-mode], [data-theme-polarity], [data-design-surface-id]) {
    --background: var(--theme-bg);
    --foreground: var(--theme-text-primary);
    --card: var(--theme-card-bg);
    --card-foreground: var(--theme-text-primary);
    --popover: var(--theme-surface-elevated);
    --popover-foreground: var(--theme-text-primary);
    --primary: var(--theme-primary-h) calc(var(--theme-primary-s) + var(--theme-color-intensity-delta)) var(--theme-primary-l);
    --primary-foreground: var(--theme-primary-foreground);
    --secondary: var(--theme-secondary-h) calc(var(--theme-secondary-s) + var(--theme-color-intensity-delta)) var(--theme-secondary-l);
    --secondary-foreground: var(--theme-secondary-foreground);
    --muted: var(--theme-surface-muted);
    --muted-foreground: var(--theme-text-muted);
    --accent: var(--theme-accent-h) calc(var(--theme-accent-s) + var(--theme-color-intensity-delta)) var(--theme-accent-l);
    --accent-foreground: var(--theme-accent-foreground);
    --destructive: var(--theme-error);
    --destructive-foreground: var(--theme-error-action-foreground);
    --border: var(--theme-border);
    --input: var(--theme-input-border);
    --ring: var(--theme-focus-ring);
  }

  /*
   * Resolved color contract
   *
   * The theme and Shadcn tokens above intentionally remain channel-only so
   * consumers can apply their own alpha with `hsl(var(--token) / <alpha>)`.
   * Cross-product surfaces, however, need complete CSS <color> values. Keep
   * those two contracts distinct: `--ps-color-*` is always directly usable in
   * `color`, `background`, `border-color`, and `color-mix()`.
   *
   * Redeclaring on every governed theme/surface scope is important. A custom
   * property's var() references are resolved where it is declared, so a root-
   * only alias would capture the document theme and ignore a nested surface's
   * mode or accent override.
   */
  :where(:root, .dark, [data-theme], [data-theme-mode], [data-theme-polarity], [data-design-surface-id]) {
    --ps-color-background: hsl(var(--background));
    --ps-color-foreground: hsl(var(--foreground));
    --ps-color-panel: hsl(var(--card));
    --ps-color-panel-foreground: hsl(var(--card-foreground));
    --ps-color-panel-elevated: hsl(var(--popover));
    --ps-color-panel-elevated-foreground: hsl(var(--popover-foreground));
    --ps-color-muted: hsl(var(--muted));
    --ps-color-muted-foreground: hsl(var(--muted-foreground));
    --ps-color-primary: hsl(var(--primary));
    --ps-color-primary-foreground: hsl(var(--primary-foreground));
    --ps-color-accent: hsl(var(--accent));
    --ps-color-accent-foreground: hsl(var(--accent-foreground));
    --ps-color-danger: hsl(var(--status-danger));
    --ps-color-danger-foreground: hsl(var(--status-danger-foreground));
    --ps-color-warning: hsl(var(--status-warning));
    --ps-color-warning-foreground: hsl(var(--status-warning-foreground));
    --ps-color-success: hsl(var(--status-success));
    --ps-color-success-foreground: hsl(var(--status-success-foreground));
    --ps-color-info: hsl(var(--status-info));
    --ps-color-info-foreground: hsl(var(--status-info-foreground));
    --ps-color-neutral: hsl(var(--status-neutral));
    --ps-color-neutral-foreground: hsl(var(--status-neutral-foreground));
    --ps-color-border: hsl(var(--border));
    --ps-color-input: hsl(var(--input));
    --ps-color-focus-ring: hsl(var(--ring));

    /* Agent Surface compatibility aliases are resolved colors, not channels. */
    --surface-background: var(--ps-color-background);
    --surface-foreground: var(--ps-color-foreground);
    --surface-panel: var(--ps-color-panel);
    --surface-panel-foreground: var(--ps-color-panel-foreground);
    --surface-muted: var(--ps-color-muted-foreground);
    --surface-border: var(--ps-color-border);
    --surface-accent: var(--ps-color-accent);
    --surface-accent-foreground: var(--ps-color-accent-foreground);
    --surface-danger: var(--ps-color-danger);
    --surface-danger-foreground: var(--ps-color-danger-foreground);
    --surface-warning: var(--ps-color-warning);
    --surface-warning-foreground: var(--ps-color-warning-foreground);
  }

  :root,
  .dark,
  [data-theme-mode][data-theme-mode='dark'],
  [data-theme-mode][data-theme-mode='dim'],
  [data-theme-polarity][data-theme-polarity='dark'] {
    color-scheme: dark;
  }

  [data-theme-mode][data-theme-mode='light'],
  [data-theme-polarity][data-theme-polarity='light'] {
    color-scheme: light;
  }

  [data-surface-recipe='admin-dense'],
  [data-surface-baseline-recipe='admin-dense'] {
    --surface-control-height: 32px;
    --surface-row-height: 38px;
    --surface-panel-gap: 10px;
  }

[data-design-component='button'] {
  min-height: var(--surface-control-height);
}

[data-design-component='input'] {
  min-height: var(--surface-control-height);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--theme-input-bg));
  color: hsl(var(--theme-input-text));
}

[data-design-component='input']::placeholder {
  color: hsl(var(--theme-input-placeholder));
}

[data-design-component='card'] {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

[data-design-component='table'] {
  border-color: hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

[data-design-component='interactive-row'] {
  min-height: var(--surface-row-height);
  border-color: hsl(var(--border));
}

[data-design-component='interactive-row']:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

[data-design-component='status-chip'] {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid currentColor;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Two attributes intentionally outrank local utility classes. Components own
 * shape intent; material recipes own material, not geometry. */
[data-design-component][data-design-shape='control'] {
  border-radius: var(--shape-radius-control);
}

[data-design-component][data-design-shape='tile'] {
  border-radius: var(--shape-radius-tile);
}

[data-design-component][data-design-shape='field'] {
  border-radius: var(--shape-radius-field);
}

[data-design-component][data-design-shape='row'] {
  border-radius: var(--shape-radius-row);
}

[data-design-component][data-design-shape='content'] {
  border-radius: var(--shape-radius-content);
}

[data-design-component][data-design-shape='dialog'] {
  border-radius: var(--shape-radius-dialog);
}

[data-design-component][data-design-shape='pill'] {
  border-radius: var(--shape-radius-pill);
}

[data-design-component][data-design-shape='circle'] {
  border-radius: var(--shape-radius-circle);
}

[data-design-component='status-chip'][data-tone='success'] {
  color: hsl(var(--status-success-foreground));
  background: hsl(var(--status-success) / 0.14);
}

[data-design-component='status-chip'][data-tone='warning'] {
  color: hsl(var(--status-warning-foreground));
  background: hsl(var(--status-warning) / 0.14);
}

[data-design-component='status-chip'][data-tone='danger'] {
  color: hsl(var(--status-danger-foreground));
  background: hsl(var(--status-danger) / 0.14);
}

[data-design-component='status-chip'][data-tone='info'] {
  color: hsl(var(--status-info-foreground));
  background: hsl(var(--status-info) / 0.14);
}

[data-design-component='status-chip'][data-tone='neutral'] {
  color: hsl(var(--status-neutral-foreground));
  background: hsl(var(--status-neutral) / 0.12);
}

/* Agent Surface semantic bridge. Product themes own values; Agent Surface owns layout. */
:root {
  /* Content-viewing surfaces intentionally keep a stable media surround. */
  --ps-media-canvas: #050505;
  --ps-shadow-channel: 0 0% 0%;
  --ps-media-scrim: rgb(0 0 0 / 0.8);
  --agent-surface-canvas: hsl(var(--background));
  --agent-surface-foreground: hsl(var(--foreground));
  --agent-surface-muted: hsl(var(--muted-foreground));
  --agent-surface-panel: hsl(var(--card));
  --agent-surface-panel-elevated: hsl(var(--popover));
  --agent-surface-border: hsl(var(--border));
  --agent-surface-accent: hsl(var(--primary));
  --agent-surface-danger: hsl(var(--status-danger-foreground));
  --agent-surface-danger-border: hsl(var(--status-danger) / 0.5);
  --agent-surface-danger-surface: hsl(var(--status-danger) / 0.12);
  --agent-surface-warning: hsl(var(--status-warning-foreground));
  --agent-surface-warning-surface: hsl(var(--status-warning) / 0.12);
  --agent-surface-focus: hsl(var(--ring));
}

.ps-appearance-softness { display: grid; gap: .5rem; margin-block: .75rem; color: hsl(var(--foreground)); }
.ps-appearance-softness input { width: 100%; accent-color: hsl(var(--primary)); }