@import url("https://fonts.cdnfonts.com/css/inter");

:root {
  /* Typography Settings */
  --font-family-sans: "Inter", Arial, Helvetica, sans-serif;

  /* Font Weights */
  --font-weight-bold: 600; /* Bold weight for headings */
  --font-weight-semibold: 500; /* Semibold weight for body text */
  --font-weight-medium: 460; /* Medium weight for body text */
  --font-weight-regular: 400; /* Regular weight for body text */

  /* Line Heights */
  --line-height-default: 1; /* Tight line height for large headings */
  --line-height-strong: 1.2; /* Compact line height for smaller headings */
  --line-height-prose: 1.6; /* Comfortable line height for reading */

  /* Letter Spacing */
  --letter-space-tightest: -0.03em; /* Display text */
  --letter-space-tighter: -0.025em; /* Large headings */
  --letter-space-tight: -0.02em; /* Medium headings */
  --letter-space-normal: -0.01em; /* Subtitle text */
  --letter-space-loosest: 0.05em; /* Uppercase text */

/* @link https://utopia.fyi/type/calculator?c=328,16,1.2,1350,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|5|6|7,s-l&g=s,m,2xl,12 */


  --step--2: clamp(0.6944rem, 0.6606rem + 0.1653vw, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7798rem + 0.2609vw, 1rem);
  --step-0: clamp(1rem, 0.9198rem + 0.3914vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0837rem + 0.5675vw, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2753rem + 0.8033vw, 1.9531rem);
  --step-3: clamp(1.728rem, 1.499rem + 1.1169vw, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.7597rem + 1.5314vw, 3.0518rem);
  --step-5: clamp(2.4883rem, 2.0626rem + 2.0765vw, 3.8147rem);
  --step-6: clamp(2.986rem, 2.4139rem + 2.7904vw, 4.7684rem);
  --step-7: clamp(3.5832rem, 2.8202rem + 3.7218vw, 5.9605rem);
}
/* @link https://utopia.fyi/space/calculator?c=328,16,1.2,1350,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|5|6|7,s-l&g=s,m,2xl,12 */

:root {
  --space-3xs: clamp(0.25rem, 0.2299rem + 0.0978vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4599rem + 0.1957vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6898rem + 0.2935vw, 0.9375rem);
  --space-s: clamp(1rem, 0.9198rem + 0.3914vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3796rem + 0.5871vw, 1.875rem);
  --space-l: clamp(2rem, 1.8395rem + 0.7828vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7593rem + 1.1742vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6791rem + 1.5656vw, 5rem);
  --space-3xl: clamp(5rem, 4.5988rem + 1.9569vw, 6.25rem);
  --space-4xl: clamp(6rem, 5.5186rem + 2.3483vw, 7.5rem);
  --space-5xl: clamp(7rem, 6.4384rem + 2.7397vw, 8.75rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1296rem + 0.5871vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3596rem + 0.6849vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.5895rem + 0.7828vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.7192rem + 1.3699vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.1791rem + 1.5656vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.4384rem + 2.7397vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.3581rem + 3.1311vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 3.2779rem + 3.5225vw, 6.25rem);
  --space-3xl-4xl: clamp(5rem, 4.1977rem + 3.9139vw, 7.5rem);
  --space-4xl-5xl: clamp(6rem, 5.1174rem + 4.3053vw, 8.75rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.5186rem + 2.3483vw, 2.5rem);
}
/* @link https://utopia.fyi/grid/calculator?c=352,16,1.2,1480,20,1.25,7,1,&s=0.75|0.5|0.25,1.5|2|3|4|5|6|7,s-l|m-xl|l-2xl|xs-m|2xs-s&g=s,l,2xl,12 */

:root {
  --grid-max-width: 84.38rem;
  --grid-gutter: var(--space-s-m, clamp(1rem, 0.7192rem + 1.3699vw, 1.875rem));
  --grid-columns: 12;
  --gap: var(--grid-gutter);
}



/**
 * effects.css - Visual Effects Variables
 * 
 * Defines variables for borders, shadows, transitions, focus states
 * and other UI effects used throughout the design system.
 */

 :root {
  /* Border Radius */
  --border-radius-small: var(--space-3xs);
  --border-radius-medium: var(--space-2xs-xs);
  --border-radius-large: var(--space-xs-s);
  --border-radius-full: 9999rem;
  
  /* Focus States */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-primary);
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-medium: 300ms ease;
  --transition-slow: 500ms ease;
  
  /* Text Direction Support */
  --direction: ltr; /* Can be switched to rtl */
  --text-align-start: left; /* Automatically flipped when dir="rtl" */
  --text-align-end: right; /* Automatically flipped when dir="rtl" */
}

/* RTL Support - these vars can be overridden by setting html[dir="rtl"] */
html[dir="rtl"] {
  --direction: rtl;
  --text-align-start: right;
  --text-align-end: left;
}