/*
  FixxyApp design tokens
  Source: Figma design system file `niSAzvDzpLMjXX6eqDzPZG`, node `19:2`
  These tokens implement the design-system foundations in repo-native CSS.
*/

:root {
  /* Typography */
  --fx-font-heading: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fx-font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fx-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fx-font-weight-regular: 400;
  --fx-font-weight-medium: 500;
  --fx-font-weight-semibold: 600;
  --fx-font-weight-bold: 700;

  --fx-text-display: clamp(2.5rem, 4vw, 3.5rem);
  --fx-text-hero: clamp(2rem, 3vw, 2.5rem);
  --fx-text-screen-title: 1.75rem;
  --fx-text-section-title: 1.5rem;
  --fx-text-card-title: 1.125rem;
  --fx-text-body-lg: 1rem;
  --fx-text-body: 0.9375rem;
  --fx-text-caption: 0.8125rem;
  --fx-text-meta: 0.6875rem;

  --fx-leading-tight: 1.1;
  --fx-leading-snug: 1.25;
  --fx-leading-normal: 1.5;

  /* Primary: Indigo Calido */
  --fx-primary-50: #eef2ff;
  --fx-primary-100: #e0e7ff;
  --fx-primary-200: #c7d2fe;
  --fx-primary-300: #a5b4fc;
  --fx-primary-400: #818cf8;
  --fx-primary-500: #6366f1;
  --fx-primary-600: #4f46e5;
  --fx-primary-700: #4338ca;
  --fx-primary-800: #3730a3;
  --fx-primary-900: #312e81;

  /* Secondary: Teal */
  --fx-secondary-50: #f0fdfa;
  --fx-secondary-100: #ccfbf1;
  --fx-secondary-200: #99f6e4;
  --fx-secondary-300: #5eead4;
  --fx-secondary-400: #2dd4bf;
  --fx-secondary-500: #14b8a6;
  --fx-secondary-600: #0d9488;
  --fx-secondary-700: #0f766e;
  --fx-secondary-800: #115e59;
  --fx-secondary-900: #134e4a;

  /* Accent: Amber */
  --fx-accent-50: #fffbeb;
  --fx-accent-100: #fef3c7;
  --fx-accent-200: #fde68a;
  --fx-accent-300: #fcd34d;
  --fx-accent-400: #fbbf24;
  --fx-accent-500: #f59e0b;
  --fx-accent-600: #d97706;
  --fx-accent-700: #b45309;
  --fx-accent-800: #92400e;
  --fx-accent-900: #78350f;

  /* Neutral: Stone Calido */
  --fx-neutral-0: #ffffff;
  --fx-neutral-50: #fafaf9;
  --fx-neutral-100: #f5f5f4;
  --fx-neutral-200: #e7e5e4;
  --fx-neutral-300: #d6d3d1;
  --fx-neutral-400: #a8a29e;
  --fx-neutral-500: #78716c;
  --fx-neutral-600: #57534e;
  --fx-neutral-700: #44403c;
  --fx-neutral-800: #292524;
  --fx-neutral-900: #1c1917;

  /* Semantic */
  --fx-success-light: #dcfce7;
  --fx-success-base: #22c55e;
  --fx-success-dark: #15803d;
  --fx-warning-light: #fef3c7;
  --fx-warning-base: #f59e0b;
  --fx-warning-dark: #b45309;
  --fx-error-light: #fee2e2;
  --fx-error-base: #ef4444;
  --fx-error-dark: #b91c1c;
  --fx-info-light: #dbeafe;
  --fx-info-base: #3b82f6;
  --fx-info-dark: #1d4ed8;

  /* Spacing: 4px grid */
  --fx-space-1: 0.25rem;
  --fx-space-2: 0.5rem;
  --fx-space-3: 0.75rem;
  --fx-space-4: 1rem;
  --fx-space-5: 1.25rem;
  --fx-space-6: 1.5rem;
  --fx-space-8: 2rem;
  --fx-space-10: 2.5rem;
  --fx-space-12: 3rem;
  --fx-space-16: 4rem;
  --fx-space-20: 5rem;

  /* Radius */
  --fx-radius-sm: 0.5rem;
  --fx-radius-md: 0.75rem;
  --fx-radius-lg: 1rem;
  --fx-radius-xl: 1.25rem;
  --fx-radius-2xl: 1.5rem;
  --fx-radius-full: 9999px;

  /* Elevation */
  --fx-shadow-sm: 0 1px 4px rgba(28, 25, 23, 0.08);
  --fx-shadow-md: 0 2px 8px rgba(28, 25, 23, 0.12);
  --fx-shadow-lg: 0 4px 16px rgba(28, 25, 23, 0.14);
  --fx-shadow-xl: 0 8px 24px rgba(28, 25, 23, 0.16);

  /* Breakpoints */
  --fx-breakpoint-small-phone: 320px;
  --fx-breakpoint-phone: 375px;
  --fx-breakpoint-large-phone: 428px;
  --fx-breakpoint-tablet: 768px;
  --fx-breakpoint-large-tablet: 1024px;

  /* Landing-page aliases */
  --fx-color-page-bg: var(--fx-neutral-50);
  --fx-color-page-bg-strong: var(--fx-primary-50);
  --fx-color-surface: var(--fx-neutral-0);
  --fx-color-surface-muted: var(--fx-neutral-100);
  --fx-color-border-subtle: var(--fx-neutral-200);
  --fx-color-border-default: var(--fx-neutral-300);

  --fx-color-text: var(--fx-neutral-800);
  --fx-color-text-muted: var(--fx-neutral-500);
  --fx-color-text-subtle: var(--fx-neutral-400);
  --fx-color-text-inverse: var(--fx-neutral-0);
  --fx-color-heading: var(--fx-neutral-800);
  --fx-color-section-title: var(--fx-neutral-900);
  --fx-color-link: var(--fx-primary-600);

  --fx-color-general: var(--fx-primary-600);
  --fx-color-general-soft: var(--fx-primary-50);
  --fx-color-general-border: var(--fx-primary-200);
  --fx-color-cta: var(--fx-color-general);
  --fx-color-cta-hover: var(--fx-primary-700);
  --fx-color-trust: var(--fx-secondary-600);
  --fx-color-highlight: var(--fx-accent-500);
  --fx-color-chip-bg: var(--fx-neutral-100);
  --fx-color-chip-text: var(--fx-neutral-500);
  --fx-color-customer: var(--fx-color-general);
  --fx-color-customer-soft: var(--fx-color-general-soft);
  --fx-color-customer-border: var(--fx-color-general-border);
  --fx-color-vendor: var(--fx-secondary-700);
  --fx-color-vendor-soft: var(--fx-secondary-50);
  --fx-color-vendor-border: var(--fx-secondary-200);

  --fx-shadow-card: var(--fx-shadow-lg);
  --fx-shadow-card-hover: var(--fx-shadow-xl);
  --fx-shadow-soft: var(--fx-shadow-md);
}