/* NightMantra — design tokens
   One source for colours, type and spacing. App, player and landing page
   all use these. Dark only (no light theme). */

/* Fonts are self-hosted (no Google Fonts requests -> no visitor IPs sent to Google).
   Put the .woff2 files in /fonts/. Latin subset covers EN/ES/PT/FR accents. */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/quicksand-v37-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/quicksand-v37-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/dm-sans-v17-latin-600.woff2') format('woff2');
}

:root {
    color-scheme: dark;

    /* ---------- brand palette (measured from the logo) ---------- */
    --nm-navy-900: #121634;   /* page background */
    --nm-navy-800: #1F2659;   /* surfaces: cards, rows, sheets (icon tile) */
    --nm-navy-700: #2A3270;   /* raised / hover surface */
    --nm-periwinkle: #9AA3E0; /* primary accent ("mantra", waves) */
    --nm-periwinkle-muted: #5D659D; /* second wave: periwinkle at 50% on navy-800 */
    --nm-sand: #F3D9A4;       /* warm accent: Premium (the sun) */
    --nm-cream: #F1E9D2;      /* text ("night") */

    /* Light-background versions (Stripe, emails) — not used in the app UI */
    --nm-light-bg: #F3F0E8;
    --nm-light-ink: #121634;
    --nm-light-accent: #4A54A8;
    --nm-light-warm: #B7792A;

    /* ---------- semantic roles (use these in components) ---------- */
    --bg: var(--nm-navy-900);
    --surface: var(--nm-navy-800);
    --surface-raised: var(--nm-navy-700);
    --border: rgba(241, 233, 210, 0.12);

    --text: var(--nm-cream);
    --text-muted: rgba(241, 233, 210, 0.68);
    --text-faint: rgba(241, 233, 210, 0.45);

    --accent: var(--nm-periwinkle);
    --on-accent: var(--nm-navy-900);    /* text on accent buttons */
    --premium: var(--nm-sand);
    --on-premium: var(--nm-navy-900);
    --danger: #E8919A;                  /* soft red that fits the palette */

    /* ---------- type ---------- */
    --font-display: 'Quicksand', 'DM Sans', system-ui, sans-serif; /* wordmark, big headings */
    --font-body: 'DM Sans', system-ui, sans-serif;

    --text-xs: 13px;
    --text-sm: 15px;
    --text-md: 17px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 30px;

    /* ---------- spacing / shape ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --tap-min: 44px; /* minimum touch target */
}

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