/* =====================================================
   variables.css — design tokens
   ===================================================== */

:root {
    /* ---- Color palette ---- */
    --ink: #12151C;            /* near-black navy — dark-mode base */
    --ink-soft: #1B2029;       /* dark-mode surface */
    --paper: #ECEEE9;          /* cool pale sage-grey — light bg */
    --paper-soft: #F5F6F2;     /* light-mode surface (cards) */
    --accent-amber: #E2A63B;   /* primary accent — CTAs, links */
    --accent-amber-dim: #B9832A;
    --accent-teal: #3F8F7A;    /* "live/available" status color */
    --slate: #2C3A4F;          /* heading text on paper */
    --slate-soft: #55647A;     /* secondary text on paper */
    --line: #D6D2C4;           /* hairlines, grid lines (light mode) */
    --line-dark: #2E3542;      /* hairlines, grid lines (dark mode) */
    --white: #FFFFFF;
    --danger: #C7532E;
    --success: #3F8F7A;

    /* ---- Type ---- */
    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* ---- Type scale ---- */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.75rem;

    /* ---- Spacing ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* ---- Layout ---- */
    --content-width: 1180px;
    --content-padding: clamp(1.25rem, 4vw, 3rem);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 220ms;

    /* ---- Active theme surface (flipped by .dark-mode) ---- */
    --bg: var(--paper);
    --surface: var(--paper-soft);
    --text: var(--slate);
    --text-soft: var(--slate-soft);
    --border: var(--line);
}

html.dark-mode {
    --bg: var(--ink);
    --surface: var(--ink-soft);
    --text: #E7E9E4;
    --text-soft: #A8ADB8;
    --border: var(--line-dark);
}