/* Selo Bazaar design foundation. Keep semantic tokens stable across public and workspace layouts. */
:root {
  color-scheme: light;

  --sb-navy: #061d5c;
  --sb-blue: #0751d8;
  --sb-blue-hover: #0643ad;
  --sb-green: #2eae2b;
  --sb-green-hover: #258c25;
  --sb-canvas: #f6f8fa;
  --sb-surface: #ffffff;
  --sb-surface-blue: #eef5ff;
  --sb-text: #14213d;
  --sb-text-muted: #64748b;
  --sb-border: #e2e8f0;
  --sb-success: #15803d;
  --sb-warning: #b45309;
  --sb-danger: #b91c1c;
  --sb-info: #0751d8;

  --sb-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb-size-xs: 0.75rem;
  --sb-size-sm: 0.875rem;
  --sb-size-md: 1rem;
  --sb-size-lg: 1.125rem;
  --sb-size-xl: 1.5rem;
  --sb-size-2xl: 2rem;

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

  --sb-radius-control: 8px;
  --sb-radius-card: 12px;
  --sb-radius-panel: 16px;
  --sb-radius-pill: 999px;
  --sb-shadow-card: 0 2px 12px rgb(6 29 92 / 6%);
  --sb-shadow-dialog: 0 14px 48px rgb(6 29 92 / 15%);
  --sb-focus-ring: 0 0 0 3px rgb(7 81 216 / 25%);
  --sb-content-width: 1440px;
  --sb-control-height: 44px;
  --sb-z-dropdown: 100;
  --sb-z-sticky: 200;
  --sb-z-drawer: 400;
  --sb-z-modal: 600;
  --sb-z-toast: 800;

  /* Compatibility aliases allow the existing UI to adopt the approved palette incrementally. */
  --primary: var(--sb-blue);
  --primary-dark: var(--sb-blue-hover);
  --primary-light: var(--sb-surface-blue);
  --secondary: var(--sb-green);
  --secondary-dark: var(--sb-green-hover);
  --secondary-light: #edf9ed;
  --bg: var(--sb-canvas);
  --white: var(--sb-surface);
  --text: var(--sb-text);
  --text-light: var(--sb-text-muted);
  --border: var(--sb-border);
  --success: var(--sb-success);
  --warning: var(--sb-warning);
  --error: var(--sb-danger);
  --surface: var(--sb-surface);
  --surface-muted: var(--sb-surface-blue);
  --shadow-soft: var(--sb-shadow-card);
  --radius-sm: var(--sb-radius-control);
  --radius-md: var(--sb-radius-card);
  --radius-lg: var(--sb-radius-panel);
  --radius-pill: var(--sb-radius-pill);
  --space-8: var(--sb-space-2);
  --space-16: var(--sb-space-4);
  --space-24: var(--sb-space-6);
  --space-40: var(--sb-space-10);
}