/*
 * Sejourning design tokens (docs/FRONTEND.md §2). Components use ONLY these variables; the visual identity can change
 * here without rewriting components. Brand palette: approved brand board v2 (docs/brand/README.md; values as stated
 * on the board). Contrast pairs are checked by tests/Frontend/DesignTokensTest.php (WCAG AA).
 */
:root {
    /* Brand palette (board v2). Navy is the principal colour; ocean, teal and sun are decorative only: below 3:1 on
       white, never for text, icons that carry meaning, borders of controls or focus indicators. */
    --sj-navy: #0b2d5b;
    --sj-ocean: #0ea5e9;
    --sj-teal: #14b8a6;
    --sj-sun: #f59e0b;
    --sj-surface-light: #f8fafc;

    /* Brand role: navy for primary actions and links (underlined); one primary CTA per view. */
    --sj-brand: var(--sj-navy);
    --sj-brand-hover: #16427f;
    --sj-brand-active: #071f40;
    --sj-brand-contrast: #ffffff;
    --sj-brand-subtle: #e6eef8;
    --sj-brand-rgb: 11, 45, 91;

    /* Accent: warm sunset, sparing (e.g. a genuine special offer). Never for body text on white. */
    --sj-accent: #a8461a;
    --sj-accent-subtle: #fdf0e9;

    /* Text */
    --sj-text: #14213d;
    --sj-text-muted: #5a6476;
    --sj-text-inverse: #ffffff;

    /* Surfaces */
    --sj-bg: #ffffff;
    --sj-bg-subtle: var(--sj-surface-light);
    --sj-surface: #ffffff;
    --sj-overlay: rgba(20, 33, 61, 0.55);
    --sj-header-bg: rgba(255, 255, 255, 0.96);
    --sj-scrim: linear-gradient(180deg, rgba(20, 33, 61, 0) 40%, rgba(20, 33, 61, 0.65) 100%); /* photo legibility only */

    /* Borders */
    --sj-border: #e2e6ec;
    --sj-border-strong: #868f9f; /* 3:1 on white and subtle: identifies form controls (WCAG 1.4.11) */

    /* Feedback (text colours are AA on white and on their subtle background) */
    --sj-success: #1d7348;
    --sj-success-subtle: #e8f5ee;
    --sj-warning: #8a5a00;
    --sj-warning-subtle: #fff5dc;
    --sj-danger: #b42f28;
    --sj-danger-subtle: #fdecea;
    --sj-info: var(--sj-brand);
    --sj-info-subtle: var(--sj-brand-subtle);

    /* Shape: one radius scale */
    --sj-radius-sm: 6px;
    --sj-radius: 10px;
    --sj-radius-lg: 16px;
    --sj-radius-pill: 999px;

    /* Depth: restrained, for floating elements (menus, sticky bars, dialogs) and hover lift only */
    --sj-shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06);
    --sj-shadow: 0 4px 16px rgba(20, 33, 61, 0.08);
    --sj-shadow-lg: 0 12px 32px rgba(20, 33, 61, 0.14);

    /* Spacing: 4px scale */
    --sj-space-1: 0.25rem;
    --sj-space-2: 0.5rem;
    --sj-space-3: 0.75rem;
    --sj-space-4: 1rem;
    --sj-space-5: 1.5rem;
    --sj-space-6: 2rem;
    --sj-space-7: 3rem;
    --sj-space-8: 4rem;

    /* Layout */
    --sj-container: 1200px;
    --sj-gutter: 1rem;
    --sj-header-h: 64px;
    --sj-tap: 44px; /* minimum touch target */

    /* Typography: one variable family for now; a display family can be added via --sj-font-display. */
    --sj-font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sj-font-display: var(--sj-font-ui);
    --sj-fs-xs: 0.75rem;
    --sj-fs-sm: 0.875rem;
    --sj-fs-md: 1rem;
    --sj-fs-lg: 1.125rem;
    --sj-fs-xl: 1.375rem;
    --sj-fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --sj-fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); /* largest heading: never "giant" */
    --sj-lh-tight: 1.2;
    --sj-lh: 1.55;
    --sj-fw-regular: 400;
    --sj-fw-medium: 500;
    --sj-fw-semibold: 600;
    --sj-fw-bold: 700;

    /* Focus */
    --sj-focus-ring: 0 0 0 3px rgba(var(--sj-brand-rgb), 0.35);
    --sj-focus-outline: 2px solid var(--sj-brand);

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

    /* Bootstrap (reboot/grid/utilities) mapped onto our tokens */
    --bs-body-font-family: var(--sj-font-ui);
    --bs-body-font-size: var(--sj-fs-md);
    --bs-body-line-height: var(--sj-lh);
    --bs-body-color: var(--sj-text);
    --bs-body-bg: var(--sj-bg);
    --bs-secondary-color: var(--sj-text-muted);
    --bs-border-color: var(--sj-border);
    --bs-border-radius: var(--sj-radius);
    --bs-link-color: var(--sj-brand);
    --bs-link-color-rgb: var(--sj-brand-rgb);
    --bs-link-hover-color: var(--sj-brand-hover);
    --bs-primary: var(--sj-brand);
    --bs-primary-rgb: var(--sj-brand-rgb);
    --bs-emphasis-color: var(--sj-text);
    --bs-heading-color: var(--sj-text);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sj-duration: 0ms;
    }
}