@layer tokens {

    /* Fonts */
:root {
    --font-gelasio: 'Gelasio', serif;
    --font-arimo: 'Arimo', sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.75rem; /* 60px */
    --font-size-7xl: 4.5rem; /* 72px */
    --font-size-8xl: 6rem; /* 96px */
    --font-size-9xl: 8rem; /* 128px */
  
  /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

  /* Line Heights */
    --line-height-xs: 1;
    --line-height-sm: 1.25;
    --line-height-md: 1.5;
    --line-height-lg: 1.75;
    --line-height-xl: 2;
    --line-height-2xl: 2.25;
    --line-height-3xl: 2.5;
    --line-height-4xl: 2.75;
    --line-height-5xl: 3;
    --line-height-6xl: 3.25;
    --line-height-7xl: 3.5;

/* Colors */
    --color-border-base: #E5E7E5;
    --color-bg-base: #FAFAFA;
    --color-bg-secondary: #FFFFFF;
    --color-bg-footer: #F1F5F9;
    --color-bg-cta: #C6C9C2A1;
    --color-text-base: #2F302E;
    --color-text-muted: #777971;
    --color-icon-base: #4B4C49;
    --color-accent-base: #CDA237;
    --color-accent-stars: #FFB600;

/* Accent interaction ramp */
    --color-accent-hover: #B8922F;
    --color-accent-active: #9F7C28;
    --color-accent-soft: #F4E9CF;
    --color-accent-focus: #E2C57A;
    --color-accent-disabled: #D9D4C6;

/* Spacing */
    --spacing-0: 0rem;
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */
    --spacing-20: 5rem; /* 80px */
    --spacing-24: 6rem; /* 96px */
    --spacing-32: 8rem; /* 128px */
    --spacing-40: 10rem; /* 160px */
    --spacing-48: 12rem; /* 192px */
    --spacing-56: 14rem; /* 224px */
    --spacing-64: 16rem; /* 256px */

  /* Border Radius */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem; /* 8px */
    --border-radius-lg: 1rem; /* 16px */
    --border-radius-xl: 1.5rem; /* 24px */
    --border-radius-2xl: 2rem; /* 32px */
    --border-radius-3xl: 2.5rem; /* 40px */
    --border-radius-4xl: 3rem; /* 48px */

  /* Border Width */
    --border-width-sm: 1px; /* 1px */
    --border-width-md: 2px; /* 2px */
    --border-width-lg: 3px; /* 3px */
    --border-width-xl: 4px; /* 4px */
    --border-width-2xl: 5px; /* 5px */
    --border-width-3xl: 6px; /* 6px */
    --border-width-4xl: 7px; /* 7px */
  
/* Box Shadow */
    --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --box-shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
    --box-shadow-4xl: 0 45px 75px -15px rgba(0, 0, 0, 0.4);
  
  /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

/* Scale (for transform) */
    --scale-none: 1;
    --scale-hover: 1.05;
    --scale-active: 0.98;

/* Transitions */
    --transition-fast: 0.1s ease-in-out;
    --transition-medium: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;

/* Easing Functions */
    --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --easing-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --easing-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --easing-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --easing-ease-out-quart: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    }
}