/*
 * Zapbuild Smartbot — design tokens
 * Ported 1:1 from the source React app's styles.css.
 * All color tokens are HSL triplets ("H S% L%"), consumed via hsl(var(--token)).
 * Never hard-code hex/rgb values in component CSS — reference a token.
 */

:root {
  /* Radius scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* Typography */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  /* Brand / accent (#0ABBAA) */
  --zb-accent: 174 89% 39%;
  --zb-accent-hover: 174 88% 33%;
  --zb-accent-active: 174 88% 27%;

  /* Backgrounds */
  --zb-bg-page: 220 20% 97%;      /* #F5F6F8 */
  --zb-bg-card: 0 0% 100%;
  --zb-bg-card-hover: 220 14% 98%;
  --zb-bg-input: 220 12% 95%;
  --zb-bg-sidebar: 186 62% 12%;   /* #0B2D31 */

  /* Text */
  --zb-text-primary: 186 40% 9%;  /* #0D1E20 */
  --zb-text-secondary: 193 12% 32%;
  --zb-text-muted: 193 12% 46%;
  --zb-text-placeholder: 193 12% 56%;
  --zb-text-disabled: 193 12% 66%;
  --zb-text-inverse: 0 0% 100%;

  /* Borders */
  --zb-border: 200 14% 92%;       /* #E7EBED */
  --zb-border-strong: 200 12% 84%;

  /* Status */
  --zb-success: 152 69% 39%;
  --zb-warning: 32 93% 50%;
  --zb-danger: 4 82% 56%;
  --zb-info: 213 96% 58%;

  /* Layout */
  --zb-sidebar-w: 224px;
  --zb-sidebar-w-collapsed: 68px;
  --zb-sidebar-w-mobile: 248px;
  --zb-topbar-h: 56px;
  --zb-footer-h: 44px;
  --zb-content-max-w: 1440px;

  /* Motion */
  --zb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --zb-dur-fast: 150ms;
  --zb-dur-base: 250ms;
  --zb-dur-slow: 400ms;

  /* Shadows (teal-black tinted) */
  --shadow-xs: 0 1px 2px rgba(12, 43, 48, 0.05);
  --shadow-sm: 0 1px 3px rgba(12, 43, 48, 0.08), 0 1px 2px rgba(12, 43, 48, 0.04);
  --shadow-md: 0 4px 8px rgba(12, 43, 48, 0.08), 0 2px 4px rgba(12, 43, 48, 0.04);
  --shadow-lg: 0 12px 24px rgba(12, 43, 48, 0.10), 0 4px 8px rgba(12, 43, 48, 0.06);
  --shadow-xl: 0 24px 48px rgba(12, 43, 48, 0.14), 0 8px 16px rgba(12, 43, 48, 0.08);
}