/* ============================================================
   tokens.css — Design token layer (single source of truth)
   Loaded BEFORE bootstrap/theme so any layer can consume them.
   All colors/spacings/type are declared once; component styles
   must reference tokens, never raw hex/px values.
   ============================================================ */

:root {
    /* ---- Fonts: self-hosted variable fonts, no CDN ---- */
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

    /* ---- Color primitives ---- */
    --c-slate-50: #F8FAFC;
    --c-slate-100: #F1F5F9;
    --c-slate-200: #E2E8F0;
    --c-slate-400: #94A3B8;
    --c-slate-500: #64748B;
    --c-slate-600: #475569;
    --c-slate-900: #0F172A;
    --c-blue-50: #EFF6FF;
    --c-blue-200: #BFDBFE;
    --c-blue-300: #93C5FD;
    --c-blue-600: #2563EB;
    --c-blue-700: #1D4ED8;
    --c-blue-900: #1E3A8A;
    --c-amber-600: #D97706;
    --c-green-500: #10B981;

    /* ---- Semantic brand tokens (referenced across templates) ---- */
    --bg-page: var(--c-slate-50);
    --bg-surface: #FFFFFF;
    --bg-inverse: var(--c-slate-900);
    --text-primary: var(--c-slate-900);
    /* #475569 on #F8FAFC/#FFF = 7.6:1 / 8.2:1 — WCAG AA for any text size */
    --text-secondary: var(--c-slate-600);
    --text-muted: var(--c-slate-500);
    --text-inverse: var(--c-slate-50);
    /* 4.6:1 on slate-900 — AA for normal text */
    --text-inverse-muted: var(--c-slate-400);
    --brand-primary: var(--c-blue-900);
    --brand-action: var(--c-blue-600);
    --brand-action-hover: var(--c-blue-700);
    --brand-accent: var(--c-amber-600);
    --border-light: var(--c-slate-200);

    /* Aliases for the legacy --clr-* palette (public-bizdire.css)
       remapped onto the canonical tokens to end the split-palette drift */
    --clr-primary: var(--brand-action);
    --clr-primary-dark: var(--brand-action-hover);
    --clr-header: var(--brand-primary);
    --clr-heading: var(--text-primary);
    --clr-body: var(--text-secondary);
    --clr-muted: var(--text-muted);
    --clr-border: var(--border-light);
    --clr-surface: var(--bg-surface);
    --clr-bg: var(--bg-page);
    --clr-footer-link: var(--c-blue-200); /* 10.9:1 on blue-900 */
    --clr-breadcrumb-active: var(--text-secondary);

    /* ---- Fluid type scale (1.125 major third-ish ratio, clamp between
       a 320px floor and a 1200px ceiling viewport) ---- */
    --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
    --fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --fs-md: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.25rem + 1.3vw, 1.875rem);
    --fs-3xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.25rem);
    --fs-4xl: clamp(2.25rem, 1.75rem + 2.6vw, 3rem);
    --fs-5xl: clamp(2.75rem, 1.9rem + 4.3vw, 4.25rem);

    /* ---- Line heights ---- */
    --lh-tight: 1.15;
    --lh-heading: 1.2;
    --lh-body: 1.6;
    --lh-relaxed: 1.7;

    /* ---- Spacing scale (fluid macro rhythm for sections) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-section: clamp(4rem, 8vw, 8rem);
    --space-section-sm: clamp(2.5rem, 5vw, 4rem);

    /* ---- Radius / shadow / motion ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 160ms var(--ease-out);

    /* ---- Accessibility requirements ----
       Focus ring: 3:1 against white and page backgrounds (WCAG 1.4.11) */
    --focus-ring-color: var(--c-blue-700);
    --focus-ring-width: 3px;
    /* WCAG 2.5.8 / best practice: interactive targets >= 48x48px */
    --target-size: 48px;
    /* Readability: max ~65 characters of body text per line (WCAG/best practice) */
    --measure: 65ch;
}

@font-face {
    font-family: 'Inter';
    /* Variable font: one file covers weights 400-700 */
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    /* Variable font: one file covers weights 500-800 */
    font-weight: 500 800;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans/pjs-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Respect users who opt out of motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}