@layer reset, tokens, base, components, pages, utilities;

@layer tokens {
  :root {
    --color-primary: oklch(55% 0.25 295);
    --color-primary-hex: #7C3AED;
    --color-secondary: oklch(75% 0.13 210);
    --color-secondary-hex: #06B6D4;

    --color-text: #0F172A;
    --color-text-muted: #475569;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F8FAFC;
    --color-border: #E2E8F0;
    --color-accent: #EDE9FE;
    --color-dark: #1E0A3C;
    --color-footer: #0F172A;
    --color-footer-muted: #94A3B8;

    --color-primary-hover: color-mix(in oklch, var(--color-primary) 88%, black);
    --color-primary-soft: color-mix(in oklch, var(--color-primary) 12%, white);
    --color-on-dark: color-mix(in oklch, white 90%, var(--color-primary));

    --gradient-brand: linear-gradient(135deg in oklch, var(--color-primary), var(--color-secondary));
    --gradient-brand-soft: linear-gradient(135deg in oklch,
      color-mix(in oklch, var(--color-primary) 8%, white),
      color-mix(in oklch, var(--color-secondary) 8%, white));

    --radius-sm: 6px;
    --radius-btn: 8px;
    --radius-card: 16px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 12px 28px color-mix(in srgb, var(--color-primary-hex) 18%, transparent);
    --shadow-navbar: 0 2px 12px rgba(15, 23, 42, 0.06);

    --transition: 0.3s ease;
    --transition-fast: 0.15s ease;

    --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    --container-max: 1200px;
    --space-section: clamp(4rem, 8vw, 7rem);
    --space-section-sm: clamp(2.5rem, 5vw, 4rem);
    --navbar-h: 98px;
  }

  html { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); }
}