/**
 * Creaixy Design Tokens — Enterprise Slate (Stripe / Atlassian inspired)
 * Restrained palette: charcoal primary, neutral surfaces, blue accent for links only.
 * Shared: index · portal · admin · marketing
 */
:root {
  /* Brand — Charcoal primary (Linear / Attio style B2B) */
  --color-primary: #111827;
  --color-primary-hover: #1F2937;
  --color-primary-active: #030712;
  --color-primary-soft: #F3F4F6;
  --color-primary-muted: #D1D5DB;
  --color-primary-text: #FFFFFF;
  --color-primary-ring: rgba(17, 24, 39, 0.18);

  /* Accent — emphasis & links only */
  --color-accent: #2563EB;
  --color-accent-soft: #EFF6FF;

  /* Neutrals — cool gray */
  --color-bg: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #F3F4F6;
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-text: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6B7280;
  --color-text-disabled: #9CA3AF;
  --color-night: #111827;
  --color-night-soft: #1F2937;

  /* Semantic — muted, status-only */
  --color-success: #047857;
  --color-success-soft: #ECFDF5;
  --color-success-border: #A7F3D0;
  --color-success-text: #065F46;

  --color-warn: #B45309;
  --color-warn-soft: #FFFBEB;
  --color-warn-border: #FDE68A;
  --color-warn-text: #92400E;

  --color-danger: #B91C1C;
  --color-danger-soft: #FEF2F2;
  --color-danger-border: #FECACA;
  --color-danger-text: #991B1B;

  --color-info-soft: #EFF6FF;
  --color-info-border: #BFDBFE;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 4px 12px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.08);
  --shadow-primary: 0 1px 2px rgba(17, 24, 39, 0.08);

  --focus-ring: 0 0 0 3px var(--color-primary-ring);
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;

  --layout-page: 48px;
  --layout-section: 88px;
  --layout-content: 1200px;
  --layout-app: 1120px;
  --layout-sidebar: 272px;

  /* Legacy aliases */
  --brand: var(--color-primary);
  --brand-hover: var(--color-primary-hover);
  --brand-light: var(--color-primary-hover);
  --brand-deep: var(--color-primary-active);
  --brand-soft: var(--color-primary-soft);
  --brand-muted: var(--color-primary-muted);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --surface: var(--color-surface);
  --canvas: var(--color-bg);
  --line: var(--color-border);
  --night: var(--color-night);
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --warn: var(--color-warn);
  --warn-soft: var(--color-warn-soft);
  --danger: var(--color-danger);
  --primary: var(--color-primary);
  --primary-soft: var(--color-primary-soft);
  --bg: var(--color-bg);
  --text: var(--color-text);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-sm);
  --shadow-brand: var(--shadow-primary);
}