/* AEOS Runtime Instance Design Tokens */

:root {
  --ds-primary: #ff8a2a;
  --ds-primary-hover: #ea6f11;
  --ds-primary-soft: #fff4ea;
  --ds-primary-ring: rgb(255 138 42 / 0.22);

  --ds-sidebar: #0f172a;
  --ds-sidebar-hover: #1e293b;
  --ds-sidebar-active: rgb(255 138 42 / 0.16);
  --ds-sidebar-border: rgb(255 255 255 / 0.12);
  --ds-sidebar-text: #cbd5e1;
  --ds-sidebar-width: 256px;
  --ds-sidebar-nav-font-size: 15px;
  --ds-sidebar-icon-size: 18px;

  --ds-background: #f7f8fa;
  --ds-card: #ffffff;
  --ds-card-muted: #f4f6f9;
  --ds-hover: #f1f5f9;

  --ds-success: #22c55e;
  --ds-success-soft: #ecfdf3;
  --ds-success-text: #15803d;
  --ds-warning: #f59e0b;
  --ds-warning-soft: #fffbeb;
  --ds-warning-text: #92400e;
  --ds-danger: #ef4444;
  --ds-danger-soft: #fef2f2;
  --ds-danger-text: #b91c1c;
  --ds-info: #2563eb;
  --ds-info-soft: #eff6ff;

  --ds-text: #0f172a;
  --ds-text-muted: #64748b;
  --ds-text-subtle: #94a3b8;
  --ds-border: #e2e8f0;
  --ds-border-strong: #cbd5e1;

  --ds-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --ds-shadow: 0 10px 28px rgb(15 23 42 / 0.06);
  --ds-shadow-lg: 0 18px 48px rgb(15 23 42 / 0.1);

  --ds-radius-sm: 6px;
  --ds-radius: 8px;
  --ds-radius-lg: 12px;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  /* 统一的企业 SaaS 业务表述 token（用于跨页面复用） */
  --color-bg-page: #f7f8fa;
  --color-bg-page-soft: #f7f8fa;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #f4f6f9;
  --color-border-subtle: #e2e8f0;
  --color-text-primary: var(--ds-text);
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-brand: var(--ds-primary);
  --color-brand-soft: color-mix(in srgb, var(--ds-primary) 12%, transparent);
  --color-info-soft: color-mix(in srgb, var(--ds-info) 12%, transparent);
  --color-warning-soft: color-mix(in srgb, var(--ds-warning) 14%, transparent);
  --color-dashboard-page: var(--color-bg-page);
  --color-dashboard-surface: var(--color-bg-surface);
  --color-dashboard-surface-soft: var(--color-bg-surface-soft);
  --color-dashboard-line-subtle: color-mix(in srgb, var(--color-text-primary) 14%, transparent);
  --color-dashboard-text: var(--color-text-primary);
  --color-dashboard-text-muted: var(--color-text-muted);
  --color-dashboard-accent: #4f7c82;
  --color-dashboard-accent-soft: color-mix(in srgb, var(--color-dashboard-accent) 12%, transparent);
  --color-dashboard-aux-bg: var(--color-bg-surface-soft);
  --color-dashboard-aux-border: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
  --color-dashboard-chip-bg: var(--color-bg-surface-soft);
  --color-dashboard-card-border: var(--color-border-subtle);
  --color-dashboard-divider: var(--color-border-subtle);
  --color-dashboard-subtle: var(--color-text-secondary);
  --color-dashboard-subtle-soft: color-mix(in srgb, var(--color-text-secondary) 78%, transparent);
  --shadow-dashboard: var(--shadow-card);
  --shadow-dashboard-hover: var(--shadow-card-hover);
  --color-dashboard-nav-bg: color-mix(in srgb, var(--color-bg-surface-soft) 72%, var(--color-bg-surface) 28%);
  --color-dashboard-nav-text: var(--color-text-secondary);
  --color-dashboard-nav-text-soft: color-mix(in srgb, var(--color-text-secondary) 78%, transparent);
  --color-dashboard-nav-border: var(--color-border-subtle);
  --color-dashboard-surface-soft-border: color-mix(in srgb, var(--color-dashboard-surface-soft) 88%, transparent);
  --color-dashboard-surface-contrast: var(--color-text-primary);
  --radius-sm: var(--ds-radius-sm);
  --radius-md: var(--ds-radius);
  --radius-lg: var(--ds-radius-lg);
  --radius-xl: 14px;
  --shadow-card: var(--ds-shadow-sm);
  --shadow-card-hover: var(--ds-shadow);
  --shadow-panel: 0 12px 28px rgba(15, 23, 42, 0.08);
  --space-1: var(--ds-space-1);
  --space-2: var(--ds-space-2);
  --space-3: var(--ds-space-3);
  --space-4: var(--ds-space-4);
  --space-5: var(--ds-space-5);
  --space-6: var(--ds-space-6);
  --space-8: var(--ds-space-8);
  --space-section: var(--space-6);

  --ds-font-weight-normal: 400;
  --ds-font-weight-medium: 600;
  --ds-font-weight-bold: 700;
  --ds-font-weight-heavy: 800;
  --ds-icon-size: 16px;

  /* AEOS Theme Token Foundation - System baseline */
  --theme-color-bg: var(--ds-background);
  --theme-color-card: var(--ds-card);
  --theme-color-card-muted: var(--ds-card-muted);
  --theme-color-border: var(--ds-border);
  --theme-color-border-strong: var(--ds-border-strong);
  --theme-color-text: var(--ds-text);
  --theme-color-muted: var(--ds-text-muted);
  --theme-color-subtle: var(--ds-text-subtle);
  --theme-color-warning: var(--ds-warning);
  --theme-color-warning-bg: var(--ds-warning-soft);
  --theme-color-warning-text: var(--ds-warning-text);
  --theme-color-success: var(--ds-success);
  --theme-color-success-bg: var(--ds-success-soft);
  --theme-color-success-text: var(--ds-success-text);
  --theme-color-danger: var(--ds-danger);
  --theme-color-danger-bg: var(--ds-danger-soft);
  --theme-color-danger-text: var(--ds-danger-text);
  --theme-color-info: var(--ds-info);
  --theme-color-info-bg: var(--ds-info-soft);
  --theme-radius-card: var(--ds-radius);
  --theme-radius-control: var(--ds-radius);
  --theme-radius-pill: 999px;
  --theme-spacing-unit: var(--ds-space-2);
  --theme-spacing-card: var(--ds-space-3);
  --theme-shadow-level-1: var(--ds-shadow-sm);
  --theme-shadow-level-2: var(--ds-shadow);
  --theme-shadow-level-3: var(--ds-shadow-lg);
  --theme-sidebar-bg: var(--ds-sidebar);
  --theme-sidebar-hover: var(--ds-sidebar-hover);
  --theme-sidebar-active: var(--ds-sidebar-active);
  --theme-sidebar-accent: var(--ds-primary);
  --theme-button-accent: var(--ds-primary);
  --theme-button-accent-hover: var(--ds-primary-hover);

  /* Reserved theme families. These are inert until a theme class is enabled. */
  --theme-family-light: "vlingo-os-light";
  --theme-family-dark: "executive-dark";
  --theme-family-brand: "vitalveil";
  --theme-family-executive: "executive";

  --primary-color: var(--ds-primary);
  --primary-hover: var(--ds-primary-hover);
  --brand-orange: var(--ds-primary);
  --brand-orange-soft: var(--ds-primary-soft);
  --brand-yellow: var(--ds-warning);
  --enterprise-navy: var(--ds-sidebar);
  --enterprise-slate: var(--ds-text);
  --enterprise-panel: var(--ds-sidebar-hover);
  --secondary-color: #475569;
  --secondary-hover: #334155;
  --success-color: var(--ds-success);
  --warning-color: var(--ds-warning);
  --warning-hover: #d97706;
  --error-color: var(--ds-danger);
  --error-hover: #dc2626;
  --processing-color: var(--ds-info);
  --background-color: var(--ds-background);
  --surface-color: var(--ds-card);
  --soft-surface: var(--ds-card-muted);
  --text-color: var(--ds-text);
  --muted-text: var(--ds-text-muted);
  --text-primary: var(--ds-text);
  --text-secondary: var(--ds-text-muted);
  --border-color: var(--ds-border);
  --shadow: var(--ds-shadow-sm);
  --shadow-lg: var(--ds-shadow);
  --border-radius: var(--ds-radius);
  --border-radius-lg: var(--ds-radius-lg);
  --space-page: var(--ds-space-6);
  --space-module: var(--ds-space-6);
  --space-field: var(--ds-space-4);
  --space-button: var(--ds-space-2);
  --control-height: 42px;
  --button-height: 40px;
  --button-min-width: 88px;

  /* 与全局 design-token 并行的 legacy alias */
  --background: var(--color-bg-page);
  --surface: var(--color-bg-surface);
  --surface-soft: var(--color-bg-surface-soft);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --surface-border: var(--color-border-subtle);
  --surface-border-strong: var(--ds-border-strong);
  --surface-border-subtle: var(--color-border-subtle);
  --radius-xs: var(--radius-sm);
  --radius-md: var(--ds-radius);
  --radius-lg: var(--radius-lg);
  --space-x-small: var(--space-1);
  --space-small: var(--space-2);
  --space-medium: var(--space-3);
  --space-large: var(--space-4);
  --space-x-large: var(--space-6);

  --ui-page-background: var(--color-bg-page);
  --ui-page-background-soft: var(--color-bg-page-soft);
  --ui-content-surface: var(--color-bg-surface);
  --ui-content-surface-soft: var(--color-bg-surface-soft);
  --ui-content-surface-border: var(--color-border-subtle);
  --ui-muted-surface: var(--color-dashboard-surface-soft);
  --ui-muted-surface-2: var(--color-bg-surface-soft);
  --ui-brand: var(--color-brand);
  --ui-brand-soft: var(--color-brand-soft);
  --ui-info-soft: var(--color-info-soft);
  --ui-warning-soft: var(--color-warning-soft);
  --ui-radius-sm: var(--radius-sm);
  --ui-radius-md: var(--radius-md);
  --ui-radius-lg: var(--radius-lg);
  --ui-radius-xl: var(--radius-xl);
  --ui-space-1: var(--space-1);
  --ui-space-2: var(--space-2);
  --ui-space-3: var(--space-3);
  --ui-space-4: var(--space-4);
  --ui-space-5: var(--space-5);
  --ui-space-6: var(--space-6);
  --ui-space-8: var(--space-8);
  --ui-shadow-card: var(--shadow-card);
  --ui-shadow-card-hover: var(--shadow-card-hover);
  --ui-shadow-panel: var(--shadow-panel);

  --ws-page-bg: var(--color-dashboard-page);
  --ws-surface: var(--color-dashboard-surface);
  --ws-surface-soft: var(--color-dashboard-surface-soft);
  --ws-text: var(--color-dashboard-text);
  --ws-muted-text: var(--color-dashboard-text-muted);
  --ws-divider: var(--color-dashboard-divider);
  --ws-nav-bg: var(--color-dashboard-nav-bg);
  --ws-nav-text: var(--color-dashboard-nav-text);
  --ws-nav-text-soft: var(--color-dashboard-nav-text-soft);
  --ws-nav-border: var(--color-dashboard-nav-border);
  --ws-accent: var(--color-dashboard-accent);
  --ws-accent-soft: var(--color-dashboard-accent-soft);
}