/* Trooly Design Tokens v1.0 — CSS-only bridge for the Bayer insight board. */

/* === 1. Primitives ======================================================= */
:root {
  --color-brand-50: #f0faf8;
  --color-brand-100: #d1f0ea;
  --color-brand-200: #a3e0d5;
  --color-brand-300: #7dd0c3;
  --color-brand-400: #66c0b1;
  --color-brand-600: #4a9e91;
  --color-brand-700: #2e7d6f;
  --color-brand-800: #0f6e56;
  --color-brand-900: #083d30;

  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;

  --color-red-50: #fef2f2;
  --color-red-200: #fecaca;
  --color-red-600: #dc2626;
  --color-amber-50: #fffbeb;
  --color-amber-200: #fde68a;
  --color-amber-600: #d97706;
  --color-green-50: #f0fdf4;
  --color-green-600: #16a34a;
  --color-blue-50: #eff6ff;
  --color-blue-600: #2563eb;
  --color-violet-50: #f5f3ff;
  --color-violet-700: #6d28d9;

  /* Client identity stays separate from the Trooly product layer. */
  --color-client-deep: #10384f;
  --color-client-deep-hover: #174b65;
  --color-client-accent: #89d329;
  --color-client-mist: #edf3f5;

  --font-primary: var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-chinese: var(--font-source-han-sans), "Source Han Sans CN", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-md: 0 1px 3px rgb(0 0 0 / 7%), 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-lg: 0 4px 12px rgb(0 0 0 / 8%);
  --shadow-enterprise: 0 18px 48px rgb(16 56 79 / 12%);
  --shadow-focus: 0 0 0 2px #fff, 0 0 0 4px rgb(102 192 177 / 20%);

  --transition-fast: 100ms;
  --transition-normal: 150ms;
  --transition-slow: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}

/* === 2. Semantics ======================================================== */
:root {
  --color-background: var(--color-zinc-50);
  --color-surface: #fff;
  --color-surface-subtle: var(--color-zinc-100);
  --color-surface-hover: var(--color-brand-50);
  --color-foreground: var(--color-zinc-950);
  --color-foreground-secondary: var(--color-zinc-500);
  --color-foreground-tertiary: var(--color-zinc-400);
  --color-foreground-inverse: #fff;
  --color-border: var(--color-zinc-200);
  --color-border-subtle: var(--color-zinc-100);
  --color-border-strong: var(--color-zinc-300);

  --color-primary: var(--color-brand-400);
  --color-primary-hover: var(--color-brand-600);
  --color-primary-active: var(--color-brand-700);
  --color-primary-subtle: var(--color-brand-50);
  --color-primary-muted: var(--color-brand-100);
  --color-primary-foreground: var(--color-brand-900);

  --color-status-success: var(--color-green-600);
  --color-status-success-bg: var(--color-green-50);
  --color-status-error: var(--color-red-600);
  --color-status-error-bg: var(--color-red-50);
  --color-status-warning: var(--color-amber-600);
  --color-status-warning-bg: var(--color-amber-50);
  --color-status-info: var(--color-blue-600);
  --color-status-info-bg: var(--color-blue-50);
  --color-status-ai: var(--color-violet-700);
  --color-status-ai-bg: var(--color-violet-50);
}

/* === 3. Components ======================================================= */
:root {
  --sidebar-bg: var(--color-client-deep);
  --sidebar-bg-hover: var(--color-client-deep-hover);
  --sidebar-accent: var(--color-client-accent);
  --sidebar-foreground: rgb(255 255 255 / 82%);
  --sidebar-border: rgb(255 255 255 / 10%);

  --topbar-bg: rgb(255 255 255 / 96%);
  --topbar-border: var(--color-border);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-border-hover: var(--color-brand-200);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);

  --control-bg: var(--color-surface);
  --control-border: var(--color-border);
  --control-border-hover: var(--color-border-strong);
  --control-border-focus: var(--color-primary);
  --control-radius: var(--radius-md);
  --control-focus-ring: var(--shadow-focus);

  --filter-bg: var(--color-surface);
  --filter-fg: var(--color-foreground-secondary);
  --filter-active-bg: var(--color-primary-subtle);
  --filter-active-fg: var(--color-brand-800);
  --filter-active-border: var(--color-brand-300);

  --chart-primary: var(--color-primary);
  --chart-primary-hover: var(--color-primary-hover);
  --chart-track: var(--color-zinc-100);
  --quote-bg: var(--color-zinc-50);
  --quote-rule: var(--color-primary);

  --executive-bg: var(--color-client-deep);
  --executive-bg-hover: var(--color-client-deep-hover);
  --executive-fg: var(--color-foreground-inverse);
  --executive-muted: rgb(255 255 255 / 62%);
  --executive-rule: rgb(255 255 255 / 13%);
  --executive-accent: var(--color-client-accent);
  --executive-card-bg: rgb(255 255 255 / 5%);
  --executive-card-bg-hover: rgb(255 255 255 / 8%);
  --executive-card-border-hover: rgb(255 255 255 / 20%);
  --executive-tag-bg: rgb(137 211 41 / 12%);
  --executive-tag-border: rgb(137 211 41 / 20%);
}

/* Legacy aliases used by this zero-build demo. */
:root {
  --surface: var(--color-background);
  --card: var(--card-bg);
  --ink: var(--color-foreground);
  --ink-2: var(--color-foreground-secondary);
  --ink-3: var(--color-foreground-tertiary);
  --line: var(--color-border);
  --line-2: var(--color-border-subtle);
  --mark: var(--color-primary);
  --mark-hover: var(--color-primary-hover);
  --mark-soft: var(--color-primary-subtle);
  --brand-deep: var(--sidebar-bg);
  --brand-green: var(--sidebar-accent);
  --pos: var(--color-status-success);
  --neg: var(--color-status-error);
  --warn-bg: var(--color-status-warning-bg);
  --warn-ink: var(--color-status-warning);
  --radius: var(--card-radius);
  --sans: var(--font-primary);
  --mono: var(--font-mono);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}