/* Self-hosted fonts (R14) — @fontsource ships the .woff2 locally; Vite bundles
   them and serves them from our own origin. No Google Fonts / CDN request. */
@import '@fontsource/ibm-plex-sans/400.css';
@import '@fontsource/ibm-plex-sans/500.css';
@import '@fontsource/ibm-plex-sans/600.css';
@import '@fontsource/ibm-plex-sans/700.css';
@import '@fontsource/ibm-plex-mono/400.css';
@import '@fontsource/ibm-plex-mono/500.css';
@import '@fontsource/ibm-plex-mono/600.css';

/* Design tokens, then Tailwind v3 layers. */
@import './portal-tokens.css';
@import './admin-tokens.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    body {
        background: var(--bg);
        color: var(--text);
        font-size: var(--text-base);
        line-height: var(--lh-normal);
    }

    /* Uniform, visible focus for every interactive element (a11y §6.4/§9). */
    :focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
        border-color: var(--accent);
    }

    /* Data/IDs/IPs use tabular figures. */
    .font-mono {
        font-variant-numeric: tabular-nums;
    }

    /* Alpine: hide elements until initialised. */
    [x-cloak] {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}