@layer tokens, base, blocks, components, pages;

@layer tokens {
  :root {
    --font-primary: "Yaldevi", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --color-ink-primary: hsl(210, 15%, 95%);
    --color-ink-secondary: hsl(210, 10%, 70%);
    --color-ink-muted: hsl(210, 8%, 55%);

    --color-canvas-primary: hsl(220, 18%, 12%);
    --color-canvas-elevated: hsl(220, 16%, 16%);
    --color-canvas-overlay: hsl(220, 18%, 20%);

    --color-brand-primary: hsl(280, 70%, 58%);
    --color-brand-hover: hsl(280, 70%, 65%);
    --color-brand-accent: hsl(195, 80%, 52%);

    --color-success: hsl(142, 71%, 45%);
    --color-warning: hsl(38, 92%, 50%);
    --color-error: hsl(0, 72%, 51%);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);

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

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;

    --wrap-max: 1280px;
    --wrap-narrow: 960px;
    --wrap-prose: 720px;

    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;
  }
}