/* Public design tokens — catalog, home, auth, and utility surfaces.
   Single source of truth per DESIGN.md; consume via var(--public-*). */

:root {
    /* Brand / primary */
    --public-primary: #3525cd;
    --public-primary-interactive: #4f46e5;
    --public-primary-deep: #3323cc;
    --public-on-primary: #ffffff;
    --public-primary-fixed: #e2dfff;
    --public-on-primary-fixed: #0f0069;

    /* Secondary / accent (CTA) */
    --public-secondary: #855300;
    --public-on-secondary: #ffffff;
    --public-secondary-container: #fea619;
    --public-accent: #f59e0b;
    --public-on-secondary-container: #684000;

    /* CTA band (home join section) */
    --public-cta-band: #1e1b4b;
    --public-cta-band-deep: #12102e;
    --public-on-cta-band: #ffffff;

    /* Surfaces */
    --public-background: #fcf8ff;
    --public-surface: #ffffff;
    --public-surface-alt: #f9fafb;
    --public-surface-container-lowest: #ffffff;
    --public-surface-container-low: #f5f2ff;
    --public-surface-container: #f0ecf9;
    --public-surface-container-high: #eae6f4;
    --public-surface-variant: #e4e1ee;

    /* Text */
    --public-on-surface: #1b1b24;
    --public-on-surface-variant: #464555;
    --public-text-primary: #111827;
    --public-text-secondary: #6b7280;

    /* Borders / outlines */
    --public-outline: #777587;
    --public-outline-variant: #c7c4d8;

    /* Error */
    --public-error: #ef4444;
    --public-error-container: #ffdad6;
    --public-on-error-container: #93000a;

    /* Typography */
    --public-font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --public-headline-xl: 3rem;
    --public-headline-xl-mobile: 2rem;
    --public-headline-lg: 2rem;
    --public-body-md: 1rem;
    --public-label-md: 0.875rem;
    --public-label-sm: 0.75rem;
    --public-text-xs: 0.75rem;
    --public-text-sm: 0.875rem;

    /* Spacing */
    --public-margin-desktop: 24px;
    --public-margin-mobile: 16px;
    --public-gutter: 16px;
    --public-stack-sm: 8px;
    --public-stack-md: 16px;
    --public-stack-lg: 24px;

    /* Layout */
    --public-container-max: 80rem;
    --public-header-height: 5rem;
    --public-gutter-page: 1rem;

    /* Radius (DESIGN.md rounded scale) */
    --public-radius-sm: 0.25rem;
    --public-radius: 0.5rem;
    --public-radius-md: 0.75rem;
    --public-radius-lg: 1rem;
    --public-radius-xl: 1.5rem;
    --public-radius-full: 9999px;

    /* Shadows */
    --public-shadow-sm: 0 1px 2px rgba(27, 27, 36, 0.04);
    --public-shadow-card-hover: 0 20px 25px -5px rgba(79, 70, 229, 0.08), 0 8px 10px -6px rgba(79, 70, 229, 0.08);
    --public-shadow-hero: 0 25px 50px -12px rgba(27, 27, 36, 0.15);
    --public-shadow-cta: 0 10px 15px -3px rgba(254, 166, 25, 0.35);

    --public-transition: 200ms ease;
}

@media (min-width: 640px) {
    :root {
        --public-gutter-page: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --public-gutter-page: 2rem;
    }
}

@media (max-width: 767px) {
    :root {
        --public-header-height: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --public-transition: 0ms;
    }
}