/* Layer order is declared once here; every other file wraps itself in its layer. */
@layer tokens, base, components, layout, pages, utilities;

@layer tokens {
    :root {
        /* Brand */
        --nur-navy-900: #0a1f47;
        --nur-navy-700: #12306b;
        --nur-navy-500: #2a4d95;
        --nur-green-700: #0d5c3a;
        --nur-green-500: #1b8a5a;
        --nur-green-100: #dff1e6;
        --nur-gold-600: #a97a1f;
        --nur-gold-500: #c9962e;
        --nur-gold-300: #e3c27a;
        --nur-sand-100: #f6efe0;
        --nur-sand-50: #fbf8f1;

        /* Semantic */
        --nur-bg: var(--nur-sand-50);
        --nur-surface: #ffffff;
        --nur-surface-alt: var(--nur-sand-100);
        --nur-ink: #17233a;
        --nur-ink-soft: #54617a;
        --nur-line: #e7dfcd;
        --nur-primary: var(--nur-navy-700);
        --nur-primary-strong: var(--nur-navy-900);
        --nur-success: var(--nur-green-700);
        --nur-accent: var(--nur-gold-500);
        --nur-danger: #b3261e;

        /* Type */
        /* same family as the default theme (Onest) */
        --nur-font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --nur-font-display: var(--nur-font-body);
        --nur-text-xs: 0.8125rem;
        --nur-text-sm: 0.9375rem;
        --nur-text-md: 1rem;
        --nur-text-lg: 1.125rem;
        --nur-text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
        --nur-text-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
        --nur-text-3xl: clamp(1.9rem, 1.4rem + 2.4vw, 3.25rem);

        /* Space */
        --nur-space-1: 0.25rem;
        --nur-space-2: 0.5rem;
        --nur-space-3: 0.75rem;
        --nur-space-4: 1rem;
        --nur-space-5: 1.5rem;
        --nur-space-6: 2rem;
        --nur-space-7: 3rem;
        --nur-space-8: 4.5rem;
        --nur-gutter: 1rem;

        /* Shape and depth */
        --nur-radius-sm: 10px;
        --nur-radius: 16px;
        --nur-radius-lg: 24px;
        --nur-shadow-sm: 0 1px 2px rgba(10, 31, 71, 0.06);
        --nur-shadow: 0 8px 24px rgba(10, 31, 71, 0.08);

        /* Touch and chrome */
        --nur-tap: 48px;
        --nur-header-h: 60px;
        --nur-tabbar-h: 64px;
        --nur-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    @media (min-width: 768px) {
        :root {
            --nur-gutter: 1.5rem;
            --nur-header-h: 72px;
        }
    }

    @media (min-width: 1200px) {
        :root {
            --nur-gutter: 2rem;
        }
    }
}