/* Color Variables - from original Instil site */
:root {
  /* Grayscale */
  --white: #fff;
  --gray-100: #f8f8f8;
  --gray-200: #e9ecef;
  --gray-300: #d4d4d4;
  --gray-500: #bfbfbf;
  --gray-600: #828282;
  --gray-700: #808080;
  --gray-800: #424242;
  --gray-900: #333333;
  --black: #000000;

  /* Brand Colors */
  --blue: #4a94e2;
  --purple: #c45edd;
  --yellow: #f1c40f;
  --green: #c2ddd5;
  --red: #FF6462;
  --beige: #EAE5DD;
  --teal: #62A0AB;

  /* Semantic Colors */
  --body-bg: var(--white);
  --body-color: var(--black);
  --border-color: var(--gray-200);
  --link-color: var(--black);
  --link-hover-color: var(--black);

  /* Typography */
  --font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-family-headings: 'Adieu', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Typography Scale - Standardized (rem-based) */
  /* Base: 16px (1rem) */
  --font-size-xs: 0.75rem;      /* 12px - Small labels, captions */
  --font-size-sm: 0.875rem;     /* 14px - Secondary text, form labels */
  --font-size-base: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);       /* Body text, responsive to UI */
  --font-size-md: 1.125rem;     /* 18px - Emphasized body text */
  --font-size-lg: 1.25rem;      /* 20px - Lead paragraphs, large body */
  --font-size-xl: 1.5rem;       /* 24px - H3, small headings */
  --font-size-2xl: 2rem;        /* 32px - H2, section titles */
  --font-size-3xl: 2.5rem;      /* 40px - Large headings */
  --font-size-4xl: 4rem;        /* 64px - Hero headings, H1 */

  /* Heading Sizes */
  --h1-font-size: clamp(1.4375rem, 1.4375rem + 2.25vw, 4rem);
  --h2-font-size: clamp(1.325rem, 1.325rem + 0.9vw, 3rem);
  --h3-font-size: clamp(1.3rem, 1.3rem + 0.6vw, 2rem);
  --h4-font-size: clamp(1.2625rem, 1.2625rem + 0.15vw, 2.5rem);
  --h5-font-size: var(--font-size-sm);   /* 14px / 0.875rem */
  --h6-font-size: var(--font-size-xs);   /* 12px / 0.75rem */

  /* Font Weights */
  --font-weight-light: 200;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Heading Defaults */
  --headings-font-weight: var(--font-weight-light);
  --headings-h2-font-weight: var(--font-weight-medium);
  --headings-h3-font-weight: var(--font-weight-medium);
  --headings-h4-font-weight: var(--font-weight-medium);
  --headings-h5-font-weight: var(--font-weight-normal);
  --lead-font-weight: var(--font-weight-light);

  /* Line Heights */
  --line-height-tight: 1.2;      /* Headings, compact text */
  --line-height-snug: 1.4;       /* Medium headings, subheadings */
  --line-height-normal: 1.5;     /* Default body text */
  --line-height-relaxed: 1.6;    /* Comfortable reading (lead paragraphs) */
  --line-height-loose: 1.8;      /* Spacious text, large paragraphs */
  --line-height-base: var(--line-height-normal);
  --headings-line-height: var(--line-height-tight);

  /* Systematic Spacing System */
  --space-section: 0;         /* 0px - No extra margin between sections */
  --space-container: 5rem;    /* 80px - Container internal spacing */
  --space-row: 3rem;          /* 48px - Row card spacing */
  --space-element: 2rem;      /* 32px - Between elements */
  --space-content: 1.5rem;    /* 24px - Content spacing */
  --space-small: 1rem;        /* 16px - Small gaps */
  --space-xs: 0.5rem;         /* 8px - Extra small spacing */

  /* Container Spacing */
  --container-padding-x: 32px;
  --nav-link-padding-y: 0.5rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Container Max Width */
  --container-max-width: 1600px;
}