/* Design tokens — Urban Smiles. Logo-derived palette. */
:root {
    /* Colour — core */
    --us-primary: #1BA9A5;
    --us-primary-600: #159692;
    --us-primary-700: #0E7A77;
    --us-deep: #0E5A58;
    --us-ink: #0A2540;
    --us-ink-soft: #32425C;
    --us-muted: #6B7A8F;
    --us-hairline: #D9E2E8;

    --us-accent: #F5A623;
    --us-accent-600: #DA8F15;
    --us-coral: #FB7185;

    --us-surface: #FAF7F2;
    --us-surface-2: #FFFFFF;
    --us-soft: #E8F4F3;
    --us-soft-2: #F0F9F8;
    --us-tint: #FEF6E7;

    /* Semantic */
    --us-success: #16A34A;
    --us-danger: #DC2626;
    --us-warning: #F59E0B;

    /* Type */
    --us-font-display: 'Fraunces', 'Playfair Display', 'Georgia', serif;
    --us-font-body: 'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --us-text-xs: 0.75rem;
    --us-text-sm: 0.875rem;
    --us-text-base: 1rem;
    --us-text-lg: 1.125rem;
    --us-text-xl: 1.25rem;
    --us-text-2xl: 1.5rem;
    --us-text-3xl: 1.875rem;
    --us-text-4xl: 2.25rem;
    --us-text-5xl: 3rem;
    --us-text-6xl: 3.75rem;
    --us-text-7xl: 4.5rem;

    --us-leading-tight: 1.15;
    --us-leading-snug: 1.3;
    --us-leading-normal: 1.5;
    --us-leading-relaxed: 1.65;

    --us-tracking-tight: -0.02em;
    --us-tracking-normal: 0;
    --us-tracking-wide: 0.04em;

    /* Spacing 4pt-8pt grid */
    --us-s-1: 0.25rem;
    --us-s-2: 0.5rem;
    --us-s-3: 0.75rem;
    --us-s-4: 1rem;
    --us-s-5: 1.25rem;
    --us-s-6: 1.5rem;
    --us-s-8: 2rem;
    --us-s-10: 2.5rem;
    --us-s-12: 3rem;
    --us-s-16: 4rem;
    --us-s-20: 5rem;
    --us-s-24: 6rem;
    --us-s-32: 8rem;

    /* Layout */
    --us-container: 1200px;
    --us-narrow: 820px;
    --us-wide: 1440px;
    --us-gutter: clamp(1rem, 4vw, 2.5rem);

    /* Radius */
    --us-r-sm: 6px;
    --us-r-md: 12px;
    --us-r-lg: 20px;
    --us-r-xl: 28px;
    --us-r-pill: 999px;

    /* Shadow — teal-tinted for brand cohesion */
    --us-shadow-sm: 0 1px 2px rgba(14, 90, 88, 0.06);
    --us-shadow-md: 0 1px 3px rgba(14, 90, 88, 0.08), 0 6px 14px rgba(14, 90, 88, 0.06);
    --us-shadow-lg: 0 2px 6px rgba(14, 90, 88, 0.1), 0 18px 40px rgba(14, 90, 88, 0.1);
    --us-shadow-xl: 0 4px 12px rgba(14, 90, 88, 0.12), 0 30px 60px rgba(14, 90, 88, 0.14);
    --us-shadow-inset: inset 0 1px 2px rgba(14, 90, 88, 0.05);
    --us-ring: 0 0 0 3px rgba(27, 169, 165, 0.32);
    --us-glow: 0 0 0 1px rgba(27, 169, 165, 0.15), 0 8px 30px rgba(27, 169, 165, 0.18);

    /* Motion */
    --us-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --us-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --us-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --us-dur-1: 150ms;
    --us-dur-2: 250ms;
    --us-dur-3: 400ms;
    --us-dur-4: 600ms;

    /* Z */
    --us-z-base: 0;
    --us-z-raised: 10;
    --us-z-sticky: 100;
    --us-z-overlay: 500;
    --us-z-modal: 1000;
    --us-z-toast: 1500;

    /* Header */
    --us-header-h: 76px;
    --us-bottom-nav-h: 64px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root.allow-dark {
        --us-surface: #0A1A24;
        --us-surface-2: #0E2030;
        --us-soft: #0E2A2A;
        --us-soft-2: #0D3232;
        --us-ink: #EAF2F6;
        --us-ink-soft: #B8C6D4;
        --us-muted: #8093A8;
        --us-hairline: #1B2F40;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}