@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/OpenSans-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --ja-color-obsidian-900: #1a1a1a;
  --ja-color-obsidian-800: #2d2d2d;
  --ja-color-obsidian-700: #404040;
  --ja-color-obsidian-600: #525252;
  --ja-color-obsidian-500: #737373;
  --ja-color-obsidian-400: #a3a3a3;
  --ja-color-obsidian-300: #d4d4d4;
  --ja-color-obsidian-200: #e5e5e5;
  --ja-color-obsidian-100: #f5f5f5;
  --ja-color-obsidian-50: #fafafa;

  --ja-color-pergamino-900: #78350f;
  --ja-color-pergamino-800: #92400e;
  --ja-color-pergamino-700: #a16207;
  --ja-color-pergamino-600: #ca8a04;
  --ja-color-pergamino-500: #eab308;
  --ja-color-pergamino-400: #facc15;
  --ja-color-pergamino-300: #fde047;
  --ja-color-pergamino-200: #fef08a;
  --ja-color-pergamino-100: #fef9c3;
  --ja-color-pergamino-50: #fefce8;

  --ja-color-azafran-900: #7c2d12;
  --ja-color-azafran-800: #9a3412;
  --ja-color-azafran-700: #c2410c;
  --ja-color-azafran-600: #ea580c;
  --ja-color-azafran-500: #f97316;
  --ja-color-azafran-400: #fb923c;
  --ja-color-azafran-300: #fdba74;
  --ja-color-azafran-200: #fed7aa;
  --ja-color-azafran-100: #ffedd5;
  --ja-color-azafran-50: #fff7ed;

  --ja-color-primary: var(--ja-color-azafran-600);
  --ja-color-primary-hover: var(--ja-color-azafran-700);
  --ja-color-secondary: var(--ja-color-pergamino-600);
  --ja-color-secondary-hover: var(--ja-color-pergamino-700);

  --ja-color-text-primary: var(--ja-color-obsidian-900);
  --ja-color-text-secondary: var(--ja-color-obsidian-600);
  --ja-color-text-muted: var(--ja-color-obsidian-500);
  --ja-color-text-inverse: var(--ja-color-obsidian-50);

  --ja-color-bg-primary: #ffffff;
  --ja-color-bg-secondary: var(--ja-color-obsidian-50);
  --ja-color-bg-tertiary: var(--ja-color-obsidian-100);

  --ja-color-border-light: var(--ja-color-obsidian-200);
  --ja-color-border-medium: var(--ja-color-obsidian-300);
  --ja-color-border-dark: var(--ja-color-obsidian-400);

  --ja-color-error: #dc2626;
  --ja-color-success: #16a34a;
  --ja-color-warning: #ea580c;

  --ja-font-family-base: "Open Sans", system-ui, -apple-system, sans-serif;
  --ja-font-family-heading: "Open Sans", system-ui, -apple-system, sans-serif;

  --ja-font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --ja-font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --ja-font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --ja-font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --ja-font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --ja-font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --ja-font-size-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
  --ja-font-size-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
  --ja-font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);

  --ja-font-weight-normal: 400;
  --ja-font-weight-medium: 500;
  --ja-font-weight-semibold: 600;
  --ja-font-weight-bold: 700;

  --ja-line-height-tight: 1.25;
  --ja-line-height-snug: 1.375;
  --ja-line-height-normal: 1.5;
  --ja-line-height-relaxed: 1.625;
  --ja-line-height-loose: 2;

  --ja-spacing-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --ja-spacing-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --ja-spacing-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --ja-spacing-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --ja-spacing-xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --ja-spacing-2xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  --ja-spacing-3xl: clamp(4rem, 3.2rem + 4vw, 6rem);

  --ja-radius-sm: 4px;
  --ja-radius-md: 8px;
  --ja-radius-lg: 16px;
  --ja-radius-xl: 24px;
  --ja-radius-full: 9999px;

  --ja-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ja-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ja-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ja-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --ja-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ja-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ja-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  --ja-container-xs: 480px;
  --ja-container-sm: 640px;
  --ja-container-md: 768px;
  --ja-container-lg: 1024px;
  --ja-container-xl: 1280px;
  --ja-container-2xl: 1536px;

  --ja-z-index-dropdown: 1000;
  --ja-z-index-sticky: 1020;
  --ja-z-index-fixed: 1030;
  --ja-z-index-modal-backdrop: 1040;
  --ja-z-index-modal: 1050;
  --ja-z-index-popover: 1060;
  --ja-z-index-tooltip: 1070;
}