:root {
  /* ======================================================================
   * TYPOGRAPHY
   * ====================================================================== */

  /* Base font settings */
  --font-size-root: 62.5%; /* Sets 1rem = 10px for easier calculations */

  /* Font sizes - following Tailwind CSS scale (adjusted for 10px base) */
  --font-size-xs: 1.2rem; /* 12px - very small text */
  --font-size-sm: 1.4rem; /* 14px - small text */
  --font-size-base: 1.6rem; /* 16px - base/body text */
  --font-size-lg: 1.8rem; /* 18px - large text */
  --font-size-xl: 2rem; /* 20px - extra large text */
  --font-size-2xl: 2.4rem; /* 24px - heading level text */
  --font-size-3xl: 3rem; /* 30px - subheading text */
  --font-size-4xl: 3.6rem; /* 36px - heading text */
  --font-size-5xl: 4.8rem; /* 48px - display text */
  --font-size-6xl: 5.6rem; /* 48px - display text */
  --font-size-7xl: 6rem; /* 60px - large display text */
  --font-size-8xl: 7.2rem; /* 72px - very large display text */
  --font-size-9xl: 9.6rem; /* 96px - huge display text */
  --font-size-10xl: 12.8rem; /* 128px - largest display text */

  /* Font weights - matching Tailwind scale */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Font families */
  --font-primary: "Open Sans", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Cantarell", "Roboto",
    "Fira Sans", "Droid Sans", "Helvetica", "Helvetica Neue", "Arial", sans-serif; /* Main content font */

  --font-secondary: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Cantarell", "Roboto",
    "Fira Sans", "Droid Sans", "Helvetica", "Helvetica Neue", "Arial", sans-serif; /* Used for headings, etc. */

  /* Line heights - mobile */
  --line-height-title-lg-mobile: 5.1rem;
  --line-height-h2-mobile: 4.6rem;
  --line-height-h3-mobile: 3.6rem;
  --line-height-h4-mobile: 3rem;
  --line-height-h5-mobile: 2.8rem;
  --line-height-h6-mobile: 2.6rem;
  --line-height-body-mobile: 2.8rem;

  /* Line heights - desktop */
  --line-height-title-lg-desktop: 11.5rem;
  --toolbar-left-width: 6.5rem;
  --line-height-h2-desktop: 6.8rem;
  --line-height-h3-desktop: 5.4rem;
  --line-height-h4-desktop: 4.4rem;
  --line-height-h5-desktop: 3.6rem;
  --line-height-h6-desktop: 3rem;
  --line-height-body-desktop: 3rem;

  /* ======================================================================
   * LAYOUT & SPACING
   * ====================================================================== */

  /* Breakpoints for responsive design */
  --breakpoint-sm: 640px; /* Small screens - mobile phones */
  --breakpoint-md: 768px; /* Medium screens - tablets portrait */
  --breakpoint-lg: 1024px; /* Large screens - tablets landscape, small desktops */
  --breakpoint-xl: 1280px; /* Extra large screens - desktops */
  --breakpoint-2xl: 1536px; /* 2X large screens - large desktops */

  /* Layout measurements */
  --l-max-width: 1440px; /* Maximum site width */
  --l-content-width: 1080px; /* Optimal width for readable content */
  --header-height-mobile: 9.2rem;
  --header-height-desktop: 19.8rem;
  --navigation-height-desktop: 5.4rem;
  --interface-toolbar-primary-height: 3.9rem;
  --interface-toolbar-secondary-height-mobile: 4.8rem;
  --interface-toolbar-secondary-height-desktop: 6rem;

  /* Spacing scale - use for margins, padding, gaps */
  --space-xs: 0.4rem; /* 4px with 62.5% base - smallest spacing */
  --space-sm: 0.8rem; /* 8px - tight spacing */
  --space-md: 1.6rem; /* 16px - standard spacing */
  --space-lg: 2.4rem; /* 24px - generous spacing */
  --space-xl: 3.2rem; /* 32px - section spacing */
  --space-xxl: 4.8rem; /* 48px - large section spacing */
  --space-2xl: 6.4rem; /* 64px - extra large section spacing */
  --space-3xl: 8rem; /* 80px - maximum section spacing */
  --space-4xl: 10rem; /* 100px - maximum section spacing */

  /* Negative spacing values - for margins, offsets */
  --space-neg-xs: -0.4rem; /* -4px - smallest negative spacing */
  --space-neg-sm: -0.8rem; /* -8px - tight negative spacing */
  --space-neg-md: -1.6rem; /* -16px - standard negative spacing */
  --space-neg-lg: -2.4rem; /* -24px - generous negative spacing */
  --space-neg-xl: -3.2rem; /* -32px - section negative spacing */
  --space-neg-xxl: -4.8rem; /* -48px - large section negative spacing */
  --space-neg-2xl: -6.4rem; /* -64px - extra large section negative spacing */
  --space-neg-3xl: -8rem; /* -80px - maximum section negative spacing */

  /* ======================================================================
   * COLOR SYSTEM
   * ====================================================================== */

  /* Base colors */
  --color-white: #fff;
  --color-black: #0c111d;

  /* Blue palette */
  --color-light-blue: #d5edf8;
  --color-blue: #2a4d91;
  --color-dark-blue: #09283c;
  --color-very-dark-blue: #001f34;

  /* Teal palette - primary brand color family */
  --color-light-teal: #196a84;
  --color-teal: #15596e;
  --color-dark-teal: #104758;
  --color-very-dark-teal: #0d2937;

  /* Cyan palette */
  --color-light-cyan: #32e7ff;
  --color-cyan: #2ac1d7;
  --color-dark-cyan: #219aac;

  /* Gray palette - neutrals */
  --color-light-gray: #bdbfbd;
  --color-gray: #929392;
  --color-dark-gray: #666;

  /* Turquoise palette */
  --color-turquoise: #4de2b2;
  --color-dark-turquoise: #60cb8b;

  /* Primary colors */
  --color-red: #c3433e;
  --color-green: #5a8c6e;
  --color-yellow: #c8c11a;
  --color-orange: #e69e34;

  /* Additional colors */
  --color-brown: #b1673d;
  --color-purple: #a06fe0;
  --color-gold: #a7953b;

  /* ======================================================================
   * SEMANTIC COLORS
   * ====================================================================== */

  /* Brand colors - use for branded elements */
  --color-brand-primary: var(--color-teal); /* Main brand color */
  --color-brand-secondary: var(--color-white); /* Secondary brand color */
  --color-accent: #32e7ff; /* Use for highlighting/emphasis */
  --color-border: var(--color-light-gray); /* Default border color */
  --color-primary-light: color-mix(in srgb, var(--color-brand-primary) 80%, #ffffff); /* Text colors */
  --color-primary-dark: color-mix(in srgb, var(--color-brand-primary) 80%, #000000); /* Text colors */
  --color-text-primary: var(--color-dark-teal); /* Main text color */
  --color-text-secondary: var(--color-white); /* For use on dark backgrounds */
  --color-text-default: #09171a; /* General text color */

  /* Background colors */
  --color-background-light: var(--color-white); /* Light page background */
  --color-background-dark: var(--color-very-dark-teal); /* Dark page background */
  --color-background-neutral: #eeee; /* Subtle neutral background */
  --color-background-accent: var(--color-dark-cyan); /* Accent background */

  /* Contextual background colors - for different content sections */
  --color-background-red: #ffece6; /* Soft red background */
  --color-background-green: #d4f5e1; /* Soft green background */
  --color-background-yellow: #f3f9d3; /* Soft yellow background */
  --color-background-orange: #fbe7ca; /* Soft orange background */
  --color-background-light-blue: var(--color-dark-cyan); /* Light blue background */
  --color-background-light-gray: var(--color-light-gray); /* Light gray background */
  --color-background-dark-blue: var(--color-dark-blue); /* Dark blue background */

  /* Status/feedback colors - for notifications and alerts */
  --color-warning: #ffc107; /* Yellow - warning notifications */
  --color-error: #dc3545; /* Red - error messages */
  --color-success: #28a745; /* Green - success messages */

  /* ======================================================================
   * EFFECTS & ANIMATIONS
   * ====================================================================== */

  /* Transition speeds - for hover effects, animations */
  --transition-fast: all 0.2s ease-in-out; /* Quick interactions */
  --transition-default: all 0.3s ease-in-out; /* Standard transitions */
  --transition-slow: all 0.5s ease-in-out; /* More noticeable transitions */

  /* ======================================================================
   * BOX SHADOWS
   * ====================================================================== */

  /* Box shadows - for hover effects, animations */
  --box-shadow-default: 0 1rem 1.2rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.2);

  /* Gin variables override */
  --gin-font-size-xxs: 1.2rem !important;
  --gin-font-size-xs: small !important;
  --gin-font-size-s: 1.4rem !important;
  --gin-font-size: 1.6rem !important;
  --gin-font-size-m: var(--gin-font-size);
  --gin-font-size-l: 1.8rem !important;
  --gin-font-size-xl: 2rem !important;
  --gin-font-size-h3: 2.4rem !important;
  --gin-font-size-h2: 2.8rem !important;
  --gin-font-size-h1: 2.56rem !important;
  --gin-font-size-quote: 1.76em !important;
  --gin-spacing-xxxs: 0.2rem !important;
  --gin-spacing-xxs: 0.4rem !important;
  --gin-spacing-xs: 0.8rem !important;
  --gin-spacing-s: 1.2rem !important;
  --gin-spacing-m: 1.6rem !important;
  --gin-spacing-l: 2.4rem !important;
  --gin-spacing-xl: 3.2rem !important;
  --gin-spacing-xxl: 4.8rem !important;
  --gin-spacing-xxxl: 6.4rem !important;
}