/* Shenbitu design tokens. This is the single palette for public pages and app UI.
   Media/proofing colors are fixed; light/dark surfaces preserve the user's canvas preference. */
:root {
  --anam-primary: #df263d;
  --anam-primary-hover: #c31b30;
  --anam-accent-vivid: #ef4148;
  --anam-cool-accent-rgb: 223, 38, 61;
  --anam-on-primary: #ffffff;
  --anam-secondary: var(--anam-primary);
  --anam-sky: var(--anam-primary-hover);
  --anam-primary-gradient: linear-gradient(135deg, var(--anam-accent-vivid), var(--anam-primary) 55%, var(--anam-primary-hover));
  --anam-shadow-rgb: 23, 27, 39;
  --anam-image-proof-white: #ffffff;
  --anam-image-proof-black: #000000;
  --anam-image-proof-checker: #d9d9d9;
  --ui-media-ink: #111111;
  --ui-media-white: #ffffff;
  --ui-media-rgb: 255, 255, 255;
  --ui-media-dark-rgb: 0, 0, 0;
  --ui-media-scrim: #0008;
  --discovery-cover-text: var(--ui-media-white);
  --discovery-cover-shade: rgba(0, 0, 0, .88);
  --canvas-layer-workflow-panel: 35;
  --canvas-layer-card-menu: 40;
  --canvas-card-radius: var(--r-lg);
  --generation-light-blue-rgb: var(--anam-cool-accent-rgb);
  --generation-ambient-duration: 8s;
  --generation-orbit-duration: 3s;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-4xl: 48px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;
  --motion-fast: 120ms; --motion: 180ms; --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ui-font-sans: "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-control-height: 40px;
  --anam-blur: blur(18px);
  --anam-glow: none;
  font-family: var(--ui-font-sans);
  font-synthesis: style;
  text-rendering: geometricPrecision;
}

:root, [data-ui-theme="light"], .anam-theme-light, .home-v2-light {
  --anam-bg: #f7f8fa;
  --anam-bg-soft: #f0f1f5;
  --anam-fg-rgb: 23, 27, 39;
  --anam-surface-rgb: 255, 255, 255;
  --anam-card-rgb: 255, 255, 255;
  --anam-tint-rgb: 255, 255, 255;
  --anam-ink-rgb: 23, 27, 39;
  --anam-border-rgb: 23, 27, 39;
  --anam-muted: #626978;
  --anam-faint: #737a87;
  --anam-success: #23845b;
  --anam-warning: #95610e;
  --anam-danger: #c52d36;
  --anam-info: var(--anam-primary);
  --anam-modal-scrim: rgba(23, 27, 39, .45);
  --anam-shadow-soft: 0 2px 8px rgba(23, 27, 39, .08);
  --anam-shadow-panel: 0 1px 2px rgba(23, 27, 39, .05), 0 12px 30px rgba(23, 27, 39, .13);
  --anam-shadow-hover: 0 2px 6px rgba(23, 27, 39, .07), 0 16px 38px rgba(23, 27, 39, .17);
  color-scheme: light;
}

[data-ui-theme="dark"], .anam-theme-dark, .home-v2-dark {
  --anam-bg: #202124;
  --anam-bg-soft: #27282c;
  --anam-fg-rgb: 242, 242, 242;
  --anam-surface-rgb: 25, 26, 29;
  --anam-card-rgb: 41, 42, 46;
  --anam-tint-rgb: 255, 255, 255;
  --anam-ink-rgb: 255, 255, 255;
  --anam-border-rgb: 255, 255, 255;
  --anam-muted: #b1b2b8;
  --anam-faint: #96979e;
  --anam-success: #4ade80;
  --anam-warning: #facc15;
  --anam-danger: #f87171;
  --anam-info: #ff8793;
  --anam-modal-scrim: rgba(0, 0, 0, .56);
  --anam-shadow-soft: 0 1px 2px rgba(0, 0, 0, .3);
  --anam-shadow-panel: 0 16px 48px rgba(0, 0, 0, .42);
  --anam-shadow-hover: 0 12px 28px rgba(0, 0, 0, .34);
  color-scheme: dark;
}

/* Redeclare derived values at each theme boundary so nested light surfaces work in a dark canvas. */
:root, [data-ui-theme], .anam-theme-light, .anam-theme-dark, .home-v2-light, .home-v2-dark {
  --anam-text: rgb(var(--anam-fg-rgb));
  --anam-surface: rgba(var(--anam-surface-rgb), .95);
  --anam-surface-raised: rgba(var(--anam-surface-rgb), .99);
  --anam-surface-solid: rgb(var(--anam-card-rgb));
  --anam-border: rgba(var(--anam-border-rgb), .09);
  --anam-border-hover: rgba(var(--anam-border-rgb), .16);
  --anam-panel-bg: rgba(var(--anam-surface-rgb), .97);
  --anam-panel-bg-strong: rgb(var(--anam-surface-rgb));
  --anam-card-shell-bg: rgb(var(--anam-card-rgb));
  --anam-panel-line: var(--anam-border);
  --anam-panel-line-strong: var(--anam-border-hover);
  --anam-focus-ring: 0 0 0 3px rgba(var(--anam-cool-accent-rgb), .22);
  --ui-accent-text: var(--anam-info);
  --canvas-chrome-bg: rgb(var(--anam-surface-rgb));
  --canvas-chrome-line: var(--anam-border);
  --canvas-chrome-hover: var(--anam-bg-soft);
  --canvas-grid-dot: rgba(var(--anam-fg-rgb), .2);
  --anam-furniture-border: var(--anam-border-hover);
  --anam-furniture-border-inner: var(--anam-border);
  color: var(--anam-text);
}
:root { background: var(--anam-bg); }

/* Legacy component names are aliases, never independent palettes. */
:root, [data-ui-theme], .anam-theme-light, .anam-theme-dark, .home-v2-light, .home-v2-dark {
  --violet-50: var(--ui-accent-soft); --violet-100: rgba(var(--anam-cool-accent-rgb), .12);
  --violet-200: rgba(var(--anam-cool-accent-rgb), .22); --violet-400: var(--anam-accent-vivid);
  --violet-500: var(--anam-primary); --violet-800: var(--anam-primary-hover); --violet-900: var(--anam-primary-hover);
  --ink-50: var(--anam-bg); --ink-100: var(--anam-bg-soft); --ink-300: var(--anam-border-hover);
  --ink-400: var(--anam-faint); --ink-800: var(--anam-text); --white: var(--anam-surface-solid);
  --lavender: var(--anam-bg); --lavender-2: var(--anam-bg-soft); --cream: var(--anam-bg); --cream-2: var(--anam-bg-soft);
  --blob-pink: var(--ui-accent-soft); --blob-mint: var(--anam-bg-soft); --blob-peach: var(--ui-accent-soft);
  --blob-blue: var(--anam-bg-soft); --blob-violet: var(--ui-accent-soft);
  --success: var(--anam-success); --warning: var(--anam-warning); --danger: var(--anam-danger);
  --grad-violet: var(--anam-primary); --grad-wonder: var(--anam-primary-gradient);
  --shadow-sm: var(--anam-shadow-soft); --shadow-md: var(--anam-shadow-panel); --shadow-lg: var(--anam-shadow-hover);
  --shadow-brand: 0 6px 18px rgba(var(--anam-cool-accent-rgb), .18);
  --font-sans: var(--ui-font-sans); --font-display: var(--ui-font-sans); --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --sbt-bg: var(--anam-bg); --sbt-surface: var(--anam-surface-solid); --sbt-ink: var(--anam-text);
  --sbt-muted: var(--anam-muted); --sbt-line: var(--anam-border); --sbt-accent: var(--anam-primary); --sbt-soft: var(--anam-bg-soft);
  --anam-text-muted: var(--anam-muted);
  --ui-hover: rgba(var(--anam-fg-rgb), .05);
  --ui-accent-soft: rgba(var(--anam-cool-accent-rgb), .1);
  --bw-bg: var(--anam-bg); --bw-paper: var(--anam-surface-solid);
  --bw-ink: var(--anam-text); --bw-muted: var(--anam-muted); --bw-line: var(--anam-border);
  --bw-blue: var(--anam-primary); --bw-purple: var(--anam-primary);
  --bw-accent-soft: var(--ui-accent-soft); --bw-purple-soft: var(--ui-accent-soft);
  --bw-success: var(--anam-success); --bw-success-soft: color-mix(in srgb, var(--anam-success) 10%, var(--anam-surface-solid));
  --bw-warning: var(--anam-warning); --bw-warning-soft: color-mix(in srgb, var(--anam-warning) 10%, var(--anam-surface-solid));
  --bw-danger: var(--anam-danger); --bw-danger-soft: color-mix(in srgb, var(--anam-danger) 10%, var(--anam-surface-solid));
  --bw-night: var(--anam-text); --bw-overlay: var(--anam-modal-scrim);
  --bw-shadow: var(--anam-shadow-soft); --bw-gradient: var(--anam-primary-gradient);
  --wh-ink-rgb: var(--anam-fg-rgb); --wh-ink: var(--anam-text); --wh-ink-2: var(--anam-text); --wh-ink-3: var(--anam-text); --wh-ink-soft: var(--anam-muted);
  --wh-paper-rgb: var(--anam-surface-rgb); --wh-paper: var(--anam-surface-solid);
  --wh-cream: var(--anam-bg-soft); --wh-cream-2: var(--anam-bg); --wh-cream-3: var(--anam-bg-soft);
  --wh-violet: var(--anam-primary); --wh-violet-soft: var(--ui-accent-soft); --wh-violet-soft-2: var(--ui-accent-soft);
  --wh-gold: var(--ui-accent-soft); --wh-gold-2: var(--ui-accent-soft); --wh-amber: var(--anam-primary);
  --wh-gold-rgb: var(--anam-cool-accent-rgb); --wh-gold-warm-rgb: var(--anam-cool-accent-rgb);
  --wh-violet-glow-rgb: var(--anam-cool-accent-rgb); --wh-violet-mist-rgb: var(--anam-cool-accent-rgb);
  --ink-200: var(--anam-border); --ink-500: var(--anam-faint); --ink-600: var(--anam-muted); --ink-700: var(--anam-text); --ink-900: var(--anam-text);
  --violet-300: var(--anam-primary); --violet-600: var(--anam-primary); --violet-700: var(--anam-sky);
}

/* Brand controls retain a full text line inside the shared workspace fields. */
.bw-shell .brand-selection select { height: var(--ui-control-height); padding: 0 var(--space-2); font-size: var(--text-sm); line-height: 1.4; }

/* Shared controls. Screen-specific CSS may set placement or width, not a new skin. */
.bw-primary, .bw-secondary, .ui-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--ui-control-height); padding: 0 var(--space-4); border: 1px solid transparent;
  border-radius: var(--r-sm); font: 500 var(--text-sm)/1.4 var(--ui-font-sans); white-space: nowrap; cursor: pointer;
}
.bw-primary, .ah-send { background: var(--anam-primary); color: var(--anam-on-primary); }
.bw-primary:hover, .ah-send:hover:not(:disabled) { filter: brightness(.94); }
.bw-secondary { color: var(--anam-text); background: var(--anam-surface-solid); border-color: var(--anam-border); }
.bw-secondary:hover { background: var(--ui-hover); }
.bw-primary:disabled, .bw-secondary:disabled, .ah-send:disabled { opacity: .4; cursor: default; }
.bw-icon-button, .ui-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--ui-control-height); height: var(--ui-control-height); padding: 0; flex: none; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--anam-muted); }
.bw-icon-button:hover, .ui-theme-toggle:hover { background: var(--ui-hover); color: var(--anam-text); }
:is(.agent-home,.bw-shell) :is(button,a,select,input,summary):focus-visible { outline: 2px solid var(--anam-primary); outline-offset: 3px; }
.ui-theme-toggle svg { width: 18px; height: 18px; }
[data-ui-theme="dark"] .ui-theme-moon, :root:not([data-ui-theme="dark"]) .ui-theme-sun { display: none; }
@media (hover:none) { .ui-theme-toggle,.bw-icon-button { min-width: 44px; min-height: 44px; } }