@layer tokens {
  :root {
    /* Primary palette aligned with lite123 */
    --color-primary: #fad502;
    --color-primary-light: #fcd342;
    --color-primary-dark: #d1b200;

    /* Secondary - playful pink */
    --color-secondary: #ff92e8;
    --color-secondary-light: #ffb3f0;
    --color-secondary-dark: #e66fd6;

    /* Accent - vivid green */
    --color-accent: #a4d700;
    --color-accent-dark: #8dbb00;
    --color-accent-light: #c5f52a;

    /* Neutrals */
    --color-neutral-100: #f7f6f2;
    --color-neutral-200: #f1efe7;
    --color-neutral-300: #d9d4c8;
    --color-neutral-400: #b5b5b5;
    --color-neutral-500: #8a8a8a;
    --color-neutral-600: #4a4a4a;
    --color-neutral-700: #2b2b2b;
    --color-neutral-900: #000000;
    
    /* Semantic */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Spacing - fluid scales */
    --space-3xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
    --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --space-s: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --space-m: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
    --space-l: clamp(2rem, 1.85rem + 0.75vw, 2.5rem);
    --space-xl: clamp(3rem, 2.75rem + 1.25vw, 4rem);
    --space-2xl: clamp(4rem, 3.5rem + 2.5vw, 6rem);
    --space-3xl: clamp(6rem, 5rem + 5vw, 10rem);

    /* Typography - fluid scales */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-s: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --text-m: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-l: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
    --text-3xl: clamp(2rem, 1.75rem + 1.25vw, 2.75rem);
    --text-4xl: clamp(2.5rem, 2.1rem + 2vw, 4rem);
    --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);

    /* Font stack */
    --font-family-base: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Line heights */
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Border radius */
    --radius-s: 0.375rem;
    --radius-m: 0.75rem;
    --radius-l: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Borders */
    --border-thin: 2px solid var(--color-neutral-900);
    --border-medium: 3px solid var(--color-neutral-900);
    --border-thick: 4px solid var(--color-neutral-900);

    /* Shadows - neubrutalism style */
    --shadow-s: 3px 3px 0 var(--color-neutral-900);
    --shadow-m: 5px 5px 0 var(--color-neutral-900);
    --shadow-l: 8px 8px 0 var(--color-neutral-900);
    --shadow-xl: 12px 12px 0 var(--color-neutral-900);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-index layers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 250;
    --z-modal: 300;
    --z-toast: 400;

    /* Container widths */
    --container-max: 1280px;
    --container-narrow: 720px;
    --container-wide: 1440px;

    /* Grid pattern for backgrounds */
    --grid-pattern: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(0, 0, 0, 0.15) 39px,
      rgba(0, 0, 0, 0.15) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(0, 0, 0, 0.15) 39px,
      rgba(0, 0, 0, 0.15) 40px
    );
    
    /* Dotted pattern */
    --dot-pattern: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
  }
}