/* Re-action design tokens. Page CSS uses only these variables. */

/* Self-hosted fonts: no third-party requests (spec, user story 46).
   Latin subset from Google Fonts (OFL); Montserrat is a variable font covering 400 and 700. */
@font-face {
    font-family: "Bodoni Moda";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bodoni-moda-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
}

:root {
    /* colour */
    --ra-bg: #ffffff;
    --ra-surface-alt: #faf8f5;
    --ra-surface-dark: #3d405b;
    --ra-ink: #3d405b;
    --ra-text-muted: #6e7084;
    --ra-primary: #c2ac94;
    --ra-on-primary: #3d405b;
    --ra-on-dark: #ffffff;
    --ra-on-dark-muted: #e7e7eb;
    --ra-border: #e7e7eb;
    --ra-overlay: rgba(0, 0, 0, 0.6);
    --ra-success: #2e7d32;
    --ra-success-bg: #e8f5e9;
    --ra-error: #c62828;
    --ra-error-bg: #fdecea;

    /* type */
    --ra-serif: "Bodoni Moda", Georgia, serif;
    --ra-sans: Montserrat, Arial, sans-serif;

    /* spacing (4px scale) */
    --ra-space-1: 4px;
    --ra-space-2: 8px;
    --ra-space-3: 12px;
    --ra-space-4: 16px;
    --ra-space-5: 24px;
    --ra-space-6: 32px;
    --ra-space-7: 48px;
    --ra-space-8: 64px;

    /* shape, depth, state */
    --ra-radius-sm: 4px;
    --ra-radius-md: 8px;
    --ra-shadow-soft: 0 4px 12px -6px rgba(61, 64, 91, 0.45);
    --ra-opacity-rest: 0.8;
    --ra-opacity-disabled: 0.4;

    /* motion */
    --ra-ease-fast: 0.2s ease-in-out;
    --ra-ease-base: 0.3s ease-in-out;

    /* layout */
    --ra-container: 1024px;
    --ra-gutter: 16px;
}