/*
=============================================
  CSS VARIABLES & DESIGN TOKENS
=============================================
*/

:root {
  /* === UL Brand Colors === */
  --ul-red-100: #f8a6b1;
  --ul-red-200: #e53613;
  --ul-red-300: #a1260d;
  --ul-red-400: #a1260d;
  --ul-red-30: rgba(240, 78, 99, 0.3);
  --ul-red-50: rgba(240, 78, 99, 0.5);

  --ul-blue-100: #8a8dc5;
  --ul-blue-200: #5256a5;
  --ul-blue-300: #35376a;
  --ul-blue-400: #181930;
  --ul-blue-30: rgba(82, 86, 165, 0.3);
  --ul-blue-50: rgba(82, 86, 165, 0.5);

  /* === Neutral Colors === */
  --neutral-100: #fafafa;
  --neutral-200: #eaeaea;
  --neutral-300: #d2d2d2;
  --neutral-400: #b5b5b5;
  --neutral-500: #a6a6a6;
  --neutral-600: #949494;
  --neutral-700: #777777;
  --neutral-800: #606060;
  --neutral-900: #4a4a4a;
  --neutral-1000: #333333;
  --neutral-10: #eaeaea1a;

  /* === Feedback Colors === */
  --red-100: #ff3c4a;
  --red-200: #e40016;
  --red-10: #ff3c4a1a;

  --yellow-100: #ffe043;
  --yellow-200: #ffb400;
  --yellow-10: #ffe0431a;

  --green-100: #a6e6a4;
  --green-200: #37b76c;
  --green-10: #a6e6a41a;

  --black-100: #000000;

  /* === Warning Colors === */
  --warning-light: #ffeaa7;
  --warning-dark: #856404;
  --warning-bg: #fff3cd;


  /* === Gradients === */
  --gradient-linear: linear-gradient(90deg, var(--ul-blue-200), var(--ul-red-200));
  --gradient-radial: radial-gradient(circle, var(--ul-blue-200), var(--ul-red-200));

  /* === Typography - Fluid Responsive System === */
  /* 1.25 ratio scale with automatic responsive sizing using clamp() */
  --font-family-base: 'Stolzl', sans-serif;
  --font-size-base: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-h1: clamp(2.67rem, 2.2rem + 2.35vw, 3.052rem);
  --font-size-h2: clamp(2.136rem, 1.85rem + 1.43vw, 2.441rem);
  --font-size-h3: clamp(1.709rem, 1.55rem + 0.795vw, 1.953rem);
  --font-size-h4: clamp(1.368rem, 1.28rem + 0.44vw, 1.563rem);
  --font-size-h5: clamp(1.094rem, 1.04rem + 0.27vw, 1.25rem);
  --font-size-h6: clamp(0.875rem, 0.84rem + 0.175vw, 1rem);
  --font-size-breadcrumb: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

  /* === Breakpoints === */
  --breakpoint-sm: 640px;   /* Mobile */
  --breakpoint-md: 768px;   /* Tablet */
  --breakpoint-lg: 1024px;  /* Desktop */
  --breakpoint-xl: 1280px;  /* Large Desktop */
  --breakpoint-2xl: 1536px; /* Extra Large */

  /* === Spacing Scale === */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
}