/* fsq-tokens-q13.css - Design tokens layer */
@layer tokens {
  :root {
    /* Color palette - Fantasy quest theme */
    --fsq-color-primary-50: #fef3e7;
    --fsq-color-primary-100: #fde0c3;
    --fsq-color-primary-200: #fbcc9b;
    --fsq-color-primary-300: #f9b873;
    --fsq-color-primary-400: #f7a955;
    --fsq-color-primary-500: #f59b37;
    --fsq-color-primary-600: #e88f31;
    --fsq-color-primary-700: #d67f2a;
    --fsq-color-primary-800: #c47024;
    --fsq-color-primary-900: #a45618;

    --fsq-color-secondary-50: #e8f4f8;
    --fsq-color-secondary-100: #c5e3ed;
    --fsq-color-secondary-200: #9fd1e1;
    --fsq-color-secondary-300: #78bed5;
    --fsq-color-secondary-400: #5bb0cc;
    --fsq-color-secondary-500: #3ea2c3;
    --fsq-color-secondary-600: #3894b3;
    --fsq-color-secondary-700: #30829f;
    --fsq-color-secondary-800: #28718b;
    --fsq-color-secondary-900: #1d5269;

    --fsq-color-accent-50: #fef0f3;
    --fsq-color-accent-100: #fcd9e0;
    --fsq-color-accent-200: #f9c0cc;
    --fsq-color-accent-300: #f7a7b8;
    --fsq-color-accent-400: #f594a9;
    --fsq-color-accent-500: #f3819a;
    --fsq-color-accent-600: #e67992;
    --fsq-color-accent-700: #d46d86;
    --fsq-color-accent-800: #c2627a;
    --fsq-color-accent-900: #a24e64;

    --fsq-color-neutral-50: #fafaf9;
    --fsq-color-neutral-100: #f5f5f4;
    --fsq-color-neutral-200: #e7e5e4;
    --fsq-color-neutral-300: #d6d3d1;
    --fsq-color-neutral-400: #a8a29e;
    --fsq-color-neutral-500: #78716c;
    --fsq-color-neutral-600: #57534e;
    --fsq-color-neutral-700: #44403c;
    --fsq-color-neutral-800: #292524;
    --fsq-color-neutral-900: #1c1917;

    /* Semantic colors */
    --fsq-color-bg: var(--fsq-color-neutral-50);
    --fsq-color-surface: #ffffff;
    --fsq-color-text: var(--fsq-color-neutral-900);
    --fsq-color-text-muted: var(--fsq-color-neutral-600);
    --fsq-color-border: var(--fsq-color-neutral-200);
    --fsq-color-focus: var(--fsq-color-primary-500);

    /* Typography - Aleo font */
    --fsq-font-family: "Aleo", "Georgia", "Times New Roman", serif;
    --fsq-font-family-mono: "Courier New", monospace;

    /* Fluid type scale using clamp() */
    --fsq-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fsq-text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --fsq-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --fsq-text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --fsq-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --fsq-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --fsq-text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
    --fsq-text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
    --fsq-text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);

    /* Font weights */
    --fsq-font-light: 300;
    --fsq-font-normal: 400;
    --fsq-font-bold: 700;

    /* Line heights */
    --fsq-leading-tight: 1.25;
    --fsq-leading-snug: 1.375;
    --fsq-leading-normal: 1.5;
    --fsq-leading-relaxed: 1.625;
    --fsq-leading-loose: 2;

    /* Spacing scale */
    --fsq-space-1: 0.25rem;
    --fsq-space-2: 0.5rem;
    --fsq-space-3: 0.75rem;
    --fsq-space-4: 1rem;
    --fsq-space-5: 1.25rem;
    --fsq-space-6: 1.5rem;
    --fsq-space-8: 2rem;
    --fsq-space-10: 2.5rem;
    --fsq-space-12: 3rem;
    --fsq-space-16: 4rem;
    --fsq-space-20: 5rem;
    --fsq-space-24: 6rem;

    /* Border radius */
    --fsq-radius-sm: 0.25rem;
    --fsq-radius-md: 0.5rem;
    --fsq-radius-lg: 0.75rem;
    --fsq-radius-xl: 1rem;
    --fsq-radius-full: 9999px;

    /* Shadows */
    --fsq-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --fsq-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --fsq-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --fsq-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transitions */
    --fsq-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --fsq-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --fsq-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index scale */
    --fsq-z-base: 0;
    --fsq-z-dropdown: 1000;
    --fsq-z-sticky: 1100;
    --fsq-z-fixed: 1200;
    --fsq-z-modal: 1300;
    --fsq-z-popover: 1400;
    --fsq-z-tooltip: 1500;

    /* Container widths */
    --fsq-container-sm: 640px;
    --fsq-container-md: 768px;
    --fsq-container-lg: 1024px;
    --fsq-container-xl: 1280px;
    --fsq-container-2xl: 1536px;
  }

}