/*
 * Design tokens: the single source for colours, type, spacing, radii and shadows.
 * Colours come from the logo (ocean-blue globe, green land, orange van).
 *   --c-primary  every action (buttons, links, focus, selected state)
 *   --c-accent   highlights only (Pro badge, active day, the One Click Trip action), never body text
 *   --c-success / --c-warning / --c-danger  one colour per meaning
 * Map pins keep their own palette (js/map-pins.js): rating colour + category glyph.
 * --font is set per request from the admin font setting (templates/theme.html).
 */
:root {
    /* Brand */
    --c-primary: #1D5FA8;
    --c-primary-hover: #164C87;
    --c-primary-tint: #EEF4FB;
    --c-primary-tint-2: #DCE9F7;
    --c-accent: #F28C28;
    --c-accent-ink: #9A4A08;       /* accent-coloured text on light backgrounds */
    --c-accent-tint: #FFF1E3;

    /* Status: base / text on tint / tint */
    --c-success: #2E8A4F;
    --c-success-ink: #1F6B3B;
    --c-success-tint: #E9F5EE;
    --c-warning: #B36B00;
    --c-warning-ink: #8A5200;
    --c-warning-tint: #FFF4E0;
    --c-danger: #C4362B;
    --c-danger-ink: #A12B22;
    --c-danger-tint: #FDECEA;

    /* Neutrals */
    --c-ink: #0F2233;              /* headings, primary text */
    --c-ink-2: #44566A;            /* body text */
    --c-muted: #5E6E7F;            /* captions, meta (4.9:1 on white) */
    --c-line: #E3E8EE;             /* dividers, card borders */
    --c-line-strong: #C9D3DE;      /* input and secondary-button borders */
    --c-canvas: #F5F7F9;           /* page background */
    --c-surface: #FFFFFF;          /* cards, panels */

    /* Type */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-display: 2.75rem;         /* 44 */
    --fs-h1: 2rem;                 /* 32 */
    --fs-h2: 1.5rem;               /* 24 */
    --fs-h3: 1.125rem;             /* 18 */
    --fs-body: 1rem;               /* 16 */
    --fs-small: 0.875rem;          /* 14 */
    --fs-label: 0.75rem;           /* 12, uppercase labels */
    --lh-tight: 1.15;
    --lh-body: 1.55;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;

    /* Spacing (4 px base) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-6: 24px;
    --s-8: 32px;
    --s-12: 48px;
    --s-16: 64px;

    /* Radii */
    --r-sm: 6px;                   /* buttons, inputs */
    --r-md: 10px;                  /* cards, popups, menus */
    --r-lg: 16px;                  /* sheets, modals, hero panels */
    --r-full: 999px;               /* pills, avatars */

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(15, 34, 51, 0.06), 0 1px 3px rgba(15, 34, 51, 0.10);
    --shadow-2: 0 12px 32px rgba(15, 34, 51, 0.14);
    --focus-ring: 0 0 0 3px var(--c-primary-tint-2);

    /* Controls */
    --control-h: 44px;
    --control-h-sm: 36px;
}