/* ============================================================
   EU Trade Dashboard — BASE layer: fonts, reset, design tokens,
   site-header brand block.

   Loaded by EVERY page, before screen.css. Also the only chrome
   stylesheet the weasyprint PDF render sees (base + content.css)
   — keep it free of anything the print medium can't use.
   ============================================================ */

/* ===== FONTS ===== */

/* No webfont on screen: the stack below promotes the user's system
   humanist/grotesque sans (San Francisco, Segoe UI, Roboto, ...) to first
   place -- zero font download, zero swap flash, and per-platform rendering
   very close to Inter's genre (SF in particular is Inter's metrics model).

   The Inter subset (static/css/inter.woff2) still exists, but only for the
   print/PDF pipeline: it lives in print.css, which weasyprint loads
   alongside this file (canlipe/reports.py) and the chart figure renderer
   registers directly (reports/figures.py). Rebuild it with
   maintenance/build_font.py. */

/* ===== RESET ===== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

/* ===== DESIGN TOKENS ===== */

:root {
    /* Surfaces */
    --clr-bg: #f1f3f7;
    --clr-surface: #ffffff;
    --clr-surface-alt: #fafbfd;
    --clr-border: #c3cbda;

    /* Text */
    --clr-text: #2a3042;
    --clr-text-muted: #5c6b88;
    --clr-text-inverse: var(--clr-surface);

    /* Accents */
    --clr-accent: #1b3a85;
    --clr-accent-hover: #122a64;
    --clr-accent-light: #e8edf6;
    --clr-highlight: #d4952e;
    --clr-highlight-light: #fff3e0;

    /* Feedback */
    --clr-error: #b91c1c;
    --clr-error-bg: #fef2f2;
    --clr-error-border: #fca5a5;
    --clr-success: #166534;

    /* Phase colours — supply shocks (pal[0-7] from charts.js default palette)
    even though this is a fallback, see charts.js to get the actual colors computation */
    --clr-phase-baseline: #2ea87a; /* pal[3] green */
    --clr-phase-decline: #d4952e; /* pal[1] amber */
    --clr-phase-disruption: #c43848; /* pal[2] red */
    --clr-phase-exit: #b86434; /* pal[6] brown */
    --clr-phase-full_recovery: #2ea87a; /* pal[3] green */
    --clr-phase-partial_recovery: #48b8cc; /* pal[5] cyan */
    --clr-phase-depressed: #1b3a85; /* pal[0] blue */
    --clr-phase-sporadic: #909090; /* pal[7] grey */
    /* Phase colours — price shocks */
    --clr-phase-price_spike: #d4952e; /* pal[1] amber */
    --clr-phase-price_drop: #1b3a85; /* pal[0] blue */
    --clr-phase-shock: #8848a6; /* pal[4] purple */
    --clr-phase-volatile_trade: #8848a6; /* pal[4] purple */
    --clr-phase-price_volatility: #d4952e; /* pal[1] amber */
    --clr-phase-volume_volatility: #1b3a85; /* pal[0] blue */
    --clr-phase-return_to_baseline: #2ea87a; /* pal[3] green */
    --clr-phase-post_shock: #909090; /* pal[7] grey */

    /* Spacing scale (0.25rem increments; also used for widget dimensions) */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-7: 1.75rem; /* 28px */
    --space-8: 2rem; /* 32px */
    --space-9: 2.25rem; /* 36px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    --space-20: 5rem; /* 80px */
    --space-24: 6rem; /* 96px */
    --space-32: 8rem; /* 128px */

    /* Type scale — minimum is 0.8rem; xs and 2xs removed */
    --text-sm: 0.85rem; /* 12.8px */
    --text-base: 1rem; /* 13.6px */
    --text-md: 1.125rem; /* 14.4px */
    --text-lg: 1.25rem; /* 16px */
    --text-xl: 1.375rem; /* 18px */
    --text-2xl: 1.5rem; /* 20px */
    --text-3xl: 1.75rem; /* 22px */
    --text-4xl: 2rem; /* 24px */

    /* Micro spacing (for precise adjustments) */
    --micro-1: 1px;
    --micro-2: 2px;
    --micro-3: 3px;
    --micro-4: 4px;

    /* Line height (leading) */
    --leading-tight: 1;
    --leading-snug: 1.35;
    --leading-normal: 1.45;
    --leading-relaxed: 1.55;
    --leading-loose: 1.6;

    /* Letter spacing (tracking) */
    --tracking-tight: 0.01em;
    --tracking-normal: 0.02em;
    --tracking-wide: 0.03em;
    --tracking-wider: 0.05em;

    /* Common fractional units */
    --em-sm: 0.85em;
    --em-md: 1em;
    --em-lg: 1.2em;
    --em-xl: 1.3em;
    --em-2xl: 1.6em;

    /* Tuning panel */
    --tuning-slider-min: 11rem;

    /* Bottle-grid column widths (using new scale) */
    --col-entity: var(--space-32); /* 8rem */
    --col-base: var(--space-20); /* 5rem */
    --col-stat: 3.5rem; /* Keep existing calc result */

    /* Common measurements */
    --header-height: 3.75rem;
    --sidebar-width: 17.5rem;

    /* Typography — one stack for everything: the visitor's own system
       humanist/grotesque sans. Order is nearest-to-Inter first: San
       Francisco (Inter's metrics model), Segoe UI, Roboto, then the
       common Linux desktop sans before the generic fallback. The PDF
       pipeline overrides this with Inter (see print.css). */
    --font-stack:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
        sans-serif;

    /* Visual */
    --clr-overlay: rgba(42, 48, 66, 0.55); /* modal backdrop scrim */
    --radius: 4px; /* the only rounding UI chrome ever gets */
    --radius-pill: 999px; /* status tags only (.phase-tag) — never controls */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.1);
    --shadow-lift: 0 6px 16px rgba(0, 0, 0, 0.1);
    --transition: 150ms ease;

    /* Document defaults */
    font-family: var(--font-stack);
    font-size: var(--text-base);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* -- Site header ------------------------------------------- */

.site-header {
    /* position: sticky + box-shadow live in screen.css (@media screen):
       weasyprint knows neither, and the print header doesn't want them. */
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--header-height);
    padding: 0 var(--space-5);
    background: var(--clr-surface);
    color: var(--clr-text);
    border-bottom: var(--micro-3) solid var(--clr-accent);
}

.site-header h1,
.site-header .site-title {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--clr-accent);
}

.title-short {
    display: none;
}

.header-home,
.header-home:visited {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header-home:hover {
    opacity: 0.85;
}

.header-logo {
    width: var(--em-2xl);
    height: var(--em-2xl);
    flex-shrink: 0;
    background: var(--clr-highlight);
    padding: var(--micro-3);
    border-radius: var(--radius);
}