/* Design tokens — vercel-DESIGN.md is authoritative.
   Names follow {colors.*}/{typography.*}/{spacing.*}/{rounded.*}; the
   sidebar_template_DESIGN.md aliases (--color-*, --font-*, --space-*,
   --radius-*) map onto them. Hardcode none of these in components. */

:root {
  /* Colors — brand & accent */
  --color-ink: #171717;
  --color-primary: #171717;
  --color-on-primary: #ffffff;
  --color-link: #0070f3;
  --color-link-deep: #0761d1;
  --color-link-soft: #d3e5ff;

  /* Colors — surface */
  --color-canvas: #fafafa;
  --color-canvas-elevated: #ffffff;
  --color-hairline-soft: #f2f2f2;

  /* Colors — text ladder */
  --color-body: #4d4d4d;
  --color-mute: #8f8f8f;
  --color-faint: #a1a1a1;

  /* Colors — border */
  --color-hairline: #ebebeb;

  /* Colors — semantic */
  --color-error: #ee0000;
  --color-error-deep: #c50000;
  --color-warning: #f5a623;
  --color-success: #0070f3; /* blue doubles as the positive signal */

  /* Colors — decorative gradients (hero mesh / accents only) */
  --gradient-develop-start: #007cf0;
  --gradient-develop-end: #00dfd8;
  --gradient-preview-start: #7928ca;
  --gradient-preview-end: #ff0080;
  --gradient-ship-start: #ff4d4d;
  --gradient-ship-end: #f9cb28;

  /* Typography */
  --font-family-sans: "Geist", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --typography-display-xl: 600 48px/48px var(--font-family-sans);
  --typography-display-xl-tracking: -2.4px;
  --typography-heading-lg: 600 32px/40px var(--font-family-sans);
  --typography-heading-lg-tracking: -1.28px;
  --typography-heading-md: 600 20px/28px var(--font-family-sans);
  --typography-heading-md-tracking: -0.4px;
  --typography-label-sm: 500 14px/20px var(--font-family-sans);
  --typography-mono-eyebrow: 500 12px/16px var(--font-family-mono);
  --typography-body-lg: 400 16px/24px var(--font-family-sans);
  --typography-body-md: 400 14px/20px var(--font-family-sans);
  --typography-body-sm: 400 12px/16px var(--font-family-sans);
  --typography-button-md: 500 14px/20px var(--font-family-sans);
  --typography-code: 400 14px/20px var(--font-family-mono);

  /* Spacing (4px base scale) */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 64px;

  /* Radii — bimodal: tight 6px chrome, full pills for marketing */
  --rounded-none: 0px;
  --rounded-sm: 6px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-pill-category: 64px;
  --rounded-pill: 100px;
  --rounded-full: 9999px;

  /* Elevation — Level 1 whisper, Level 2 floating */
  --shadow-1: 0px 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-2: 0px 2px 2px rgba(0, 0, 0, 0.06), 0px 8px 16px -4px rgba(0, 0, 0, 0.1);

  /* ── sidebar_template_DESIGN.md aliases (map to the tokens above) ── */
  --color-bg-sidebar: var(--color-canvas-elevated);
  --color-bg-hover: var(--color-hairline-soft);
  --color-bg-active: var(--color-hairline-soft);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: var(--color-mute);
  --color-border: var(--color-hairline);
  --color-accent: var(--color-link);
  --color-badge: var(--color-error);
  --font-family-base: var(--font-family-sans);
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --space-4: var(--spacing-xs);
  --space-8: var(--spacing-md);
  --radius-md: var(--rounded-sm);
  --radius-lg: var(--rounded-lg);
  --sidebar-width: 280px;
  --sidebar-rail: 68px;
}