/*
 * NewBeach design tokens — shared by every page of the website.
 * Same palette, font and shapes as the mobile app (lib/constants.dart).
 */
:root {
    /* Brand */
    --nb-primary: #4361ee;
    --nb-primary-dark: #3a0ca3;
    --nb-pink: #f72585;
    --nb-violet: #7209b7;
    --nb-teal: #06d6a0;
    --nb-sky: #4cc9f0;
    --nb-clothes: #0078d7;
    --nb-clothes-dark: #005a9e;
    --nb-gradient: linear-gradient(135deg, var(--nb-primary) 0%, var(--nb-primary-dark) 100%);

    /* Text & surfaces */
    --nb-ink: #1e293b;
    --nb-slate: #475569;
    --nb-muted: #64748b;
    --nb-subtle: #94a3b8;
    --nb-line: #cbd5e1;
    --nb-border: #e2e8f0;
    --nb-surface-2: #f1f5f9;
    --nb-surface: #f8fafc;
    --nb-bg: #f6f8fc; /* page background (app scaffold) */
    --nb-white: #ffffff;

    /* Status */
    --nb-success: #06d6a0;
    --nb-danger: #ef4444;
    --nb-danger-dark: #dc2626;
    --nb-warning: #f59e0b;
    --nb-warning-dark: #d97706;

    /* Shape */
    --nb-font: 'Tajawal', sans-serif;
    --nb-radius-sm: 10px;
    --nb-radius: 14px;
    --nb-radius-lg: 20px;
    --nb-radius-xl: 24px;
    --nb-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --nb-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    --nb-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
    --nb-ring: 0 0 0 4px rgba(67, 97, 238, 0.15);
}

/* Site-wide basics */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(67, 97, 238, 0.18);
}

:focus-visible {
    outline: 2px solid var(--nb-primary);
    outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}

@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;
    }
}