/* ============================================================================
   RMK design tokens — the SINGLE source of truth for the nautical design system.
   Spec 022 (design-system-foundation). Values transcribed VERBATIM from
   design-system/MASTER.md — do not edit here without editing MASTER.md.

   Every page consumes these via var(--token). New-design pages (login, cabin,
   /auto) and the shared chrome reference them; specs 023/024 retrofit the rest.
   Loaded globally in index.html so the tokens resolve everywhere.
   ============================================================================ */

:root {
    /* --- Color palette (MASTER.md §Color Palette) --- */
    --color-navy-900: #142a45;   /* deepest navy — footer, modal backdrops */
    --color-navy-700: #1c385c;   /* primary brand navy — headings, navbar, primary buttons */
    --color-navy-600: #1a2530;   /* body text on cream */
    --color-cream-50: #fdfaf3;   /* primary background (parchment) */
    --color-cream-100: #f5f1e9;  /* surface background (cards, panels) */
    --color-cream-200: #e8dfc9;  /* soft hairline border */
    --color-cream-300: #d4c9b0;  /* stronger border, dashed dividers */
    --color-brass-500: #b08d3a;  /* brass accent — hover, active, decorative borders */
    --color-brass-700: #6b5d3e;  /* muted brass — secondary text, labels */
    --color-text: var(--color-navy-600);   /* body text */
    --color-text-muted: #4a4030;            /* de-emphasized text */
    --color-link: var(--color-navy-700);    /* default link (navy, not blue) */
    --color-success: #2e7d32;    /* forest green */
    --color-warning: #ff9800;    /* signal-flag orange */
    --color-error: #a83232;      /* deep red (not signal red) */

    /* --- Typography scale (MASTER.md §Typography — modular 1.25, base 16px) --- */
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-xs: 12.8px;    /* captions, metadata */
    --text-sm: 14.4px;    /* helper text, table footer */
    --text-base: 16px;    /* body */
    --text-lg: 20px;      /* lead paragraph */
    --text-xl: 25px;      /* h4 / card title */
    --text-2xl: 31.25px;  /* h3 */
    --text-3xl: 39px;     /* h2 */
    --text-4xl: 49px;     /* h1 (page title) */
    --text-5xl: 61.25px;  /* h1 (hero only) */

    --leading-body: 1.6;
    --leading-heading: 1.2;
    --leading-heading-tight: 1.3;

    /* --- Motion (MASTER.md §Animation & Motion) --- */
    --motion-fast: 150ms;
    --motion-base: 200ms;
    --motion-slow: 250ms;
    --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
    --motion-easing-in: cubic-bezier(0.4, 0, 1, 1);

    /* --- Spacing scale (MASTER.md §Layout Principles — 4px base unit) --- */
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-4: 1rem;      /* 16 */
    --space-6: 1.5rem;    /* 24 */
    --space-8: 2rem;      /* 32 */
    --space-12: 3rem;     /* 48 */
    --space-16: 4rem;     /* 64 */

    --content-max: 1200px;       /* primary content width */
    --content-max-admin: 1400px; /* admin grid views */

    /* --- Responsive breakpoints (MASTER.md §Layout Principles) ---
       Documented as tokens for reference; @media queries use the literal px
       (custom properties can't be used inside media-query conditions). */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1440px;
}

/* Global motion-reduce reset (MASTER.md §Animation & Motion — MUST). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}