/* ========================================================================
   YourCompany — Design Tokens
   The single source of truth for every visual value.
   Read DESIGN.md before editing. Add new tokens there too.
   ======================================================================== */

:root {
  /* ─── Colors: Surface ─── */
  --color-canvas: #0b0b0b;
  --color-pure-black: #000000;
  --color-surface-1: #15181e;
  --color-surface-2: #1f232b;
  --color-surface-3: #3b3d45;
  --color-hairline: #3b3d45;
  --color-hairline-soft: #252830;
  --color-inverse-canvas: #ffffff;
  --color-inverse-ink: #0b0b0b;

  /* ─── Colors: Text ─── */
  --color-ink: #ffffff;
  --color-ink-muted: #b2b6bd;
  --color-ink-subtle: #656a76;
  --color-on-primary: #ffffff;

  /* ─── Colors: Interactive ─── */
  --color-interactive: #0052ef;
  --color-interactive-soft: #1e3a8a;
  --color-focus-ring: #0052ef;

  /* ─── Colors: Per-Vertical Identity ─── */
  --color-vertical-restaurant: #ff6b35;
  --color-vertical-medical: #14b8a6;
  --color-vertical-logistics: #3b82f6;
  --color-vertical-it: #8b5cf6;
  --color-vertical-education: #f59e0b;
  --color-vertical-manufacturing: #64748b;
  --color-vertical-ai: #10b981;

  /* Vertical color tints (8% opacity for subtle backgrounds) */
  --color-vertical-restaurant-tint: rgba(255, 107, 53, 0.08);
  --color-vertical-medical-tint: rgba(20, 184, 166, 0.08);
  --color-vertical-logistics-tint: rgba(59, 130, 246, 0.08);
  --color-vertical-it-tint: rgba(139, 92, 246, 0.08);
  --color-vertical-education-tint: rgba(245, 158, 11, 0.08);
  --color-vertical-manufacturing-tint: rgba(100, 116, 139, 0.08);
  --color-vertical-ai-tint: rgba(16, 185, 129, 0.08);

  /* Vertical color borders (~20% opacity) */
  --color-vertical-restaurant-border: rgba(255, 107, 53, 0.2);
  --color-vertical-medical-border: rgba(20, 184, 166, 0.2);
  --color-vertical-logistics-border: rgba(59, 130, 246, 0.2);
  --color-vertical-it-border: rgba(139, 92, 246, 0.2);
  --color-vertical-education-border: rgba(245, 158, 11, 0.2);
  --color-vertical-manufacturing-border: rgba(100, 116, 139, 0.2);
  --color-vertical-ai-border: rgba(16, 185, 129, 0.2);

  /* ─── Colors: Semantic ─── */
  --color-semantic-success: #10b981;
  --color-semantic-warning: #f59e0b;
  --color-semantic-error: #ef4444;

  /* ─── Typography: Font Families ─── */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, monospace;

  /* ─── Typography: Display ─── */
  --text-display-2xl-font-size: 72px;
  --text-display-2xl-line-height: 1.05;
  --text-display-2xl-letter-spacing: -2.0px;
  --text-display-2xl-font-weight: 600;

  --text-display-xl-font-size: 56px;
  --text-display-xl-line-height: 1.08;
  --text-display-xl-letter-spacing: -1.5px;
  --text-display-xl-font-weight: 600;

  --text-display-lg-font-size: 40px;
  --text-display-lg-line-height: 1.10;
  --text-display-lg-letter-spacing: -1.0px;
  --text-display-lg-font-weight: 600;

  --text-display-md-font-size: 32px;
  --text-display-md-line-height: 1.15;
  --text-display-md-letter-spacing: -0.6px;
  --text-display-md-font-weight: 600;

  --text-headline-font-size: 28px;
  --text-headline-line-height: 1.20;
  --text-headline-letter-spacing: -0.5px;
  --text-headline-font-weight: 600;

  /* ─── Typography: Card & Body ─── */
  --text-card-title-font-size: 22px;
  --text-card-title-line-height: 1.25;
  --text-card-title-letter-spacing: -0.3px;
  --text-card-title-font-weight: 600;

  --text-subhead-font-size: 20px;
  --text-subhead-line-height: 1.40;
  --text-subhead-letter-spacing: -0.2px;
  --text-subhead-font-weight: 400;

  --text-body-lg-font-size: 18px;
  --text-body-lg-line-height: 1.55;
  --text-body-lg-letter-spacing: 0;
  --text-body-lg-font-weight: 400;

  --text-body-font-size: 16px;
  --text-body-line-height: 1.55;
  --text-body-letter-spacing: 0;
  --text-body-font-weight: 400;

  --text-body-sm-font-size: 14px;
  --text-body-sm-line-height: 1.50;
  --text-body-sm-letter-spacing: 0;
  --text-body-sm-font-weight: 400;

  /* ─── Typography: Utility ─── */
  --text-caption-font-size: 13px;
  --text-caption-line-height: 1.40;
  --text-caption-font-weight: 500;

  --text-button-font-size: 14px;
  --text-button-line-height: 1.20;
  --text-button-font-weight: 500;

  --text-eyebrow-font-size: 12px;
  --text-eyebrow-line-height: 1.20;
  --text-eyebrow-letter-spacing: 0.6px;
  --text-eyebrow-font-weight: 600;

  --text-mono-font-size: 13px;
  --text-mono-line-height: 1.50;
  --text-mono-font-weight: 400;

  /* ─── Spacing ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ─── Radius ─── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-pill: 9999px;

  /* ─── Layout ─── */
  --container-max: 1280px;
  --container-padding: 24px;
  --container-padding-mobile: 16px;
  --nav-height: 64px;

  /* ─── Section Spacing ─── */
  --section-padding-y: 96px;
  --section-padding-y-tablet: 64px;
  --section-padding-y-mobile: 48px;

  /* ─── Transitions ─── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ─── Focus Ring ─── */
  --focus-ring-width: 2px;
  --focus-ring-opacity: 0.3;

  /* ─── Breakpoints (reference only; used in @media) ─── */
  /* mobile: 640px */
  /* tablet: 768px */
  /* desktop: 1024px */
  /* desktop-xl: 1440px */
}