/* Design tokens: the single source of visual constants for the site. */
:root {
  /* Colors - Sophisticated B2B Slate Palette */
  --color-bg: #f8fafc; /* Slate 50 - Soft neutral page background */
  --color-surface: #ffffff; /* White for cards, panels, and primary surfaces */
  --color-surface-raised: #ffffff; /* Raised surfaces */

  --color-border: #e2e8f0; /* Slate 200 - Soft border */
  --color-border-strong: #cbd5e1; /* Slate 300 - Interactive or hover border */

  --color-text: #0f172a; /* Slate 900 - Deep charcoal slate for primary text */
  --color-text-muted: #475569; /* Slate 600 - Readable body and description text */
  --color-text-subtle: #64748b; /* Slate 500 - Small helper text and labels */

  /* Interactive Elements - Trustworthy B2B Blue */
  --color-primary: #1d4ed8; /* Blue 700 - Professional brand interactive color */
  --color-primary-strong: #1e40af; /* Blue 800 - Deep active/hover blue */
  --color-primary-contrast: #ffffff;

  /* Teal Accent - Quiet accent for Operations/Inventory and secondary states */
  --color-accent: #0f766e; /* Teal 700 - Calm operational teal */
  --color-accent-strong: #115e59; /* Teal 800 */
  --color-accent-bg: #f0fdfa; /* Teal 50 */

  /* State Semantics - Reserved ONLY for their specific meanings */
  --color-success: #16a34a; /* Green 600 - Savings, gains, and positive states */
  --color-success-bg: #f0fdf4; /* Green 50 */

  --color-warning: #d97706; /* Amber 600 - Assumptions, notices, and attention */
  --color-warning-bg: #fffbeb; /* Amber 50 */

  --color-danger: #dc2626; /* Red 600 - Validation errors and negative/critical states */
  --color-danger-bg: #fef2f2; /* Red 50 */

  /* Typography Stack */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --font-size-h1: clamp(1.875rem, 1.6rem + 1.2vw, 2.75rem);
  --font-size-h2: clamp(1.5rem, 1.35rem + 0.8vw, 2rem);
  --font-size-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);

  --line-height-base: 1.6;
  --line-height-tight: 1.25;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3.5rem;
  --space-8: 5rem;

  /* Layout and Shape */
  --content-max-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Elevational Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);

  /* Touch / Input Usability */
  --tap-target-min: 44px;
  --input-font-size: 16px;
  --color-focus: var(--color-primary);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
  }
}