/* TOKENS — every colour, size and space in this file comes from here.
   Light values first; dark values under prefers-color-scheme. The layout
   mirrors the scheme into data-bs-theme so Bootstrap components follow. */
:root {
    color-scheme: light dark;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Type scale */
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.3125rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.75rem;
    --text-display: clamp(2rem, 3.2vw, 2.65rem);
    --leading-tight: 1.1;
    --leading-body: 1.65;

    /* Colour */
    --color-bg: #fdfcf9;
    --color-bg-surface: #f7f4ec;
    --color-bg-elevated: #f5f1ea;
    --color-nav-bg: rgba(253,252,249,0.92);
    --color-border: rgba(96,72,32,0.10);
    --color-border-strong: rgba(96,72,32,0.18);
    --color-text: #1c1a16;
    --color-text-muted: #5a5046;
    --color-text-faint: #6b6258;
    --color-accent: #5a481a;
    --color-accent-dim: rgba(176,141,46,0.1);
    --color-accent-hover: #967827;
    --color-forecast-bg: rgba(176,141,46,0.05);
    --color-forecast-border: rgba(176,141,46,0.3);
    --color-on-scope: #ffffff;

    /* Space */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-smd: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.75rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    /* Shape, depth, motion */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --border-accent: 3px;
    --shadow-card: 0 4px 18px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 32px rgba(0,0,0,0.12);
    --transition: 0.2s ease;
    --focus-ring: 2px solid var(--color-accent);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #11100e;
        --color-bg-surface: #1a1816;
        --color-bg-elevated: #221f1b;
        --color-nav-bg: rgba(17,16,14,0.92);
        --color-border: rgba(229,201,150,0.08);
        --color-border-strong: rgba(229,201,150,0.18);
        --color-text: #ece6d9;
        --color-text-muted: #a09483;
        --color-text-faint: #908775; /* ≥ 4.6:1 on every dark surface (WCAG AA) */
        --color-accent: #c9a84c;
        --color-accent-dim: rgba(201,168,76,0.15);
        --color-accent-hover: #dbb85c;
        --color-forecast-bg: rgba(201,168,76,0.08);
        --color-forecast-border: rgba(201,168,76,0.4);
        --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
        --shadow-hover: 0 8px 40px rgba(0,0,0,0.5);
    }
}

/* TERRITORIAL PALETTE — same code as politicaelectoral: blue = national,
   green = regional, amber = local, terracotta = forecast/ephemeral.
   Never invent a colour for a new territorial concept: fit it into these.
   All four pass 4.5:1 with --color-on-scope. */
:root {
    --scope-national: #0369a1;
    --scope-regional: #15803d;
    --scope-local: #b45309;
    --scope-forecast: #c2410c;
}
.pe-scope-national { --card-accent: var(--scope-national); }
.pe-scope-regional { --card-accent: var(--scope-regional); }
.pe-scope-local    { --card-accent: var(--scope-local); }

/* BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    min-height: 100vh;
}
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }
:where(a, button, input, select, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.text-muted { color: var(--color-text-muted) !important; }
/* Visible to screen readers only (Bootstrap 6 alpha ships no equivalent). */
.pe-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* NAVBAR */
.pe-navbar {
    background-color: var(--color-nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: var(--space-smd) 0;
}
.pe-navbar .navbar-brand {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--color-accent) !important;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.pe-navbar .navbar-brand span { color: var(--color-text); font-weight: 700; }
.pe-navbar .nav-link {
    color: var(--color-text-muted) !important;
    font-size: var(--text-md);
    font-weight: 500;
    padding: var(--space-xs) var(--space-smd) !important;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background-color var(--transition);
}
.pe-navbar .nav-link:hover { color: var(--color-text) !important; background-color: var(--color-bg-elevated); }
.pe-lang-switch a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-md); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.pe-lang-switch a:hover, .pe-lang-switch a[aria-current] { color: var(--color-text); background: var(--color-bg-elevated); }

/* BREADCRUMB — Bootstrap 6 alpha no longer draws the separator: drawn here. */
.pe-breadcrumb { display: flex; flex-wrap: wrap; list-style: none; background: transparent; padding: var(--space-md) 0 0; margin-bottom: 0; }
.pe-breadcrumb .breadcrumb-item { font-size: var(--text-sm); color: var(--color-text-faint); }
.pe-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 var(--space-sm); color: var(--color-text-faint); }
.pe-breadcrumb .breadcrumb-item a { color: var(--color-text-muted); text-decoration: none; }
.pe-breadcrumb .breadcrumb-item a:hover { color: var(--color-accent); }
.pe-breadcrumb .breadcrumb-item.active { color: var(--color-text-muted); }

/* HERO */
.pe-hero {
    padding: var(--space-xl) 0 var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-xl);
}
.pe-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-sm);
}
.pe-hero-title {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 900;
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
    letter-spacing: -0.02em;
}
.pe-hero-subtitle { font-size: var(--text-base); color: var(--color-text-muted); max-width: 60ch; }

.pe-section-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    margin: var(--space-xl) 0 var(--space-md);
}

/* PROSE — the generated paragraphs */
.pe-about p { max-width: 72ch; }

/* DISCLAIMER (forecast / sample data) */
.pe-disclaimer {
    background: var(--color-forecast-bg);
    border: 1px solid var(--color-forecast-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.pe-disclaimer-icon { color: var(--color-accent); flex-shrink: 0; }
.pe-disclaimer-text { font-size: var(--text-md); color: var(--color-text-muted); margin: 0; }
.pe-disclaimer-text strong { color: var(--color-accent); }

/* CARDS — region and year links on the home */
.pe-grid-regions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
}
.pe-card-region {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-md);
    font-weight: 500;
    transition: border-color var(--transition), background-color var(--transition);
}
.pe-card-region:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-dim);
    color: var(--color-text);
}
.pe-card-region i { color: var(--color-accent); font-size: var(--text-sm); }

/* FORM — the planner's query form */
.pe-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    align-items: end;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}
.pe-form-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.pe-form-field--wide { grid-column: span 2; }
@media (max-width: 575px) { .pe-form-field--wide { grid-column: auto; } }
.pe-form-field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.pe-form-field small { font-size: var(--text-xs); color: var(--color-text-faint); }
.pe-form-field input,
.pe-form-field select {
    font: inherit;
    font-size: var(--text-md);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-smd);
}
.pe-form-field input:focus-visible,
.pe-form-field select:focus-visible { border-color: var(--color-accent); }
.pe-form .btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
    font-weight: 600;
    padding: var(--space-sm) var(--space-lg);
}
.pe-form .btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* STATS */
.pe-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-lg); }
.pe-stat { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
.pe-stat-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; line-height: var(--leading-tight); color: var(--color-text); }
.pe-stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.pe-next { border-left: var(--border-accent) solid var(--card-accent, var(--color-accent)); }

/* HOLIDAY TABLE */
.pe-holidays { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.pe-holidays th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); font-weight: 600; text-align: left; padding: var(--space-sm); border-bottom: 1px solid var(--color-border-strong); }
.pe-holidays td { padding: var(--space-sm); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.pe-holidays tr { border-left: var(--border-accent) solid var(--card-accent, transparent); }
.pe-holidays tbody tr:hover { background: var(--color-bg-surface); }
.pe-scope-badge { display: inline-block; font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); color: var(--color-on-scope); background: var(--card-accent); }
.pe-weekend { color: var(--color-text-faint); }

/* YEAR GRID — 12 months in pure HTML/CSS */
.pe-cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.pe-cal-month { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md) var(--space-md); }
.pe-cal-month caption { caption-side: top; font-weight: 600; color: var(--color-text); padding: var(--space-xs) 0 var(--space-sm); }
.pe-cal-month table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); text-align: center; }
.pe-cal-month th { color: var(--color-text-faint); font-weight: 500; padding: var(--space-2xs) 0; }
.pe-cal-month td { padding: var(--space-2xs) 0; border-radius: var(--radius-sm); }
.pe-cal-month td.is-weekend { color: var(--color-text-faint); }
.pe-cal-month td.is-holiday { background: var(--card-accent); color: var(--color-on-scope); font-weight: 600; }
.pe-cal-month td.is-bridge { box-shadow: inset 0 0 0 1.5px var(--scope-forecast); }

/* LISTS OF TERRITORIES */
.pe-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-xs) var(--space-md); list-style: none; padding: 0; margin: 0; }
.pe-links a { color: var(--color-text); text-decoration: none; }
.pe-links a:hover { color: var(--color-accent); text-decoration: underline; }

/* FOOTER */
.pe-footer { border-top: 1px solid var(--color-border); padding: var(--space-xl) 0; margin-top: var(--space-2xl); }
.pe-footer-text { font-size: var(--text-sm); color: var(--color-text-faint); margin: 0; }
.pe-footer-text a { color: var(--color-text-muted); text-decoration: none; }
.pe-footer-text a:hover { color: var(--color-accent); }

@media print {
    .pe-navbar, .pe-footer, .pe-actions, .pe-lang-switch, .pe-breadcrumb { display: none !important; }
    .pe-cal-month td.is-holiday { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}