@layer psi.base, psi.theme, psi.components, psi.utilities;

@layer psi.base {
  :root {
    --psi-palette-obsidian: oklch(0.25 0.02 250);
    --psi-palette-platinum: oklch(0.95 0.005 250);
    --psi-palette-sapphire: oklch(0.55 0.21 260);
    --psi-palette-ruby: oklch(0.55 0.22 25);
    --psi-palette-amber: oklch(0.75 0.1582 75);
    --psi-palette-emerald: oklch(0.52 0.19 155);
    --psi-palette-white: oklch(1 0 0);
    --psi-palette-black: oklch(0 0 0);
  }
}

@layer psi.base {
  :root {
    --psi-space-0: 0;
    --psi-space-2: 0.125rem;
    --psi-space-4: 0.25rem;
    --psi-space-6: 0.375rem;
    --psi-space-8: 0.5rem;
    --psi-space-12: 0.75rem;
    --psi-space-16: 1rem;
    --psi-space-20: 1.25rem;
    --psi-space-24: 1.5rem;
    --psi-space-32: 2rem;
    --psi-space-40: 2.5rem;
    --psi-space-48: 3rem;
    --psi-space-64: 4rem;
    --psi-space-80: 5rem;
    --psi-space-96: 6rem;
    --psi-space-120: 7.5rem;
    --psi-space-144: 9rem;

    --psi-size-24: 1.5rem;
    --psi-size-32: 2rem;
    --psi-size-40: 2.5rem;
    --psi-size-48: 3rem;

    --psi-radius-4: 0.25rem;
    --psi-radius-6: 0.375rem;
    --psi-radius-8: 0.5rem;
    --psi-radius-12: 0.75rem;
    --psi-radius-full: 9999px;

    --psi-text-12-16-regular: 400 0.75rem/1rem var(--psi-font-sans);
    --psi-text-12-16-medium: 500 0.75rem/1rem var(--psi-font-sans);
    --psi-text-14-20-regular: 400 0.875rem/1.25rem var(--psi-font-sans);
    --psi-text-14-20-medium: 500 0.875rem/1.25rem var(--psi-font-sans);
    --psi-text-16-20-regular: 400 1rem/1.25rem var(--psi-font-sans);
    --psi-text-16-24-regular: 400 1rem/1.5rem var(--psi-font-sans);
    --psi-text-16-24-medium: 500 1rem/1.5rem var(--psi-font-sans);
    --psi-text-18-28-medium: 500 1.125rem/1.75rem var(--psi-font-sans);
    --psi-text-20-28-semibold: 600 1.25rem/1.75rem var(--psi-font-sans);
    --psi-text-24-32-medium: 500 1.5rem/2rem var(--psi-font-sans);
    --psi-text-30-36-bold: 700 1.875rem/2.25rem var(--psi-font-sans);
    --psi-text-serif-18-28-regular: 400 1.125rem/1.75rem var(--psi-font-serif);
    --psi-text-serif-20-30-regular: 400 1.25rem/1.875rem var(--psi-font-serif);
    --psi-text-serif-20-32-regular: 400 1.25rem/2rem var(--psi-font-serif);
    --psi-text-serif-24-36-regular: 400 1.5rem/2.25rem var(--psi-font-serif);
    --psi-text-serif-28-40-regular: 400 1.75rem/2.5rem var(--psi-font-serif);
    --psi-text-mono-13-20-regular: 400 0.8125rem/1.25rem var(--psi-font-mono);
    --psi-text-mono-14-20-regular: 400 0.875rem/1.25rem var(--psi-font-mono);
    --psi-text-mono-15-24-regular: 400 0.9375rem/1.5rem var(--psi-font-mono);
    --psi-text-mono-15-24-medium: 500 0.9375rem/1.5rem var(--psi-font-mono);

    --psi-display-56-128-black: 900 clamp(3.5rem, 9vw, 8rem)/0.95 var(--psi-font-display);
    --psi-display-36-64-black: 900 clamp(2.25rem, 5vw, 4rem)/1.05 var(--psi-font-display);
    --psi-display-32-32-extrabold: 800 2rem/1.1 var(--psi-font-display);

    --psi-duration-150: 150ms;
    --psi-duration-200: 200ms;
    --psi-duration-350: 350ms;
    --psi-duration-450: 450ms;
    --psi-duration-600: 600ms;
    --psi-ease-standard: ease;
    --psi-ease-in-out: ease-in-out;
    --psi-ease-soft: cubic-bezier(0.2, 0.6, 0.2, 1);

    --psi-container-max: 82rem;
    --psi-gutter: 2.5rem;
    --psi-z-nav: 100;
    --psi-z-overlay: 1000;
    --psi-z-tooltip: 1100;

    --psi-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --psi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --psi-font-serif: Georgia, "Times New Roman", Times, serif;
    --psi-font-display: var(--psi-font-sans);
  }
}