/* FlarePath Metrics — design tokens: Ledger Paper (marketing) + cockpit instrument panel (app).
   Loaded on every page before mode-specific stylesheets. */

/* --- Fonts: Source Serif 4 for headings (open-source, sober, not Fraunces),
       JetBrains Mono for numerals and labels, system stack for body sans.
       Self-hosting is a future optimization. --- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* === Ledger Paper (marketing) === */
    --paper:           #F4EFE6;
    --paper-soft:      #EDE6D7;
    --ink:             #1A1A1A;
    --ink-soft:        #4A4744;
    --ink-faint:       #8A857E;
    --oxblood:         #7A1F1F;
    --oxblood-deep:    #5C1717;
    --ledger-green:    #3F5D4A;
    --rule-warm:       #C9BFAE;
    --rule-warm-soft:  rgba(26, 26, 26, 0.10);

    /* === Cockpit instrument panel (app) === */
    --cockpit-bg:        #14181C;
    --cockpit-bg-soft:   #1C2228;
    --cockpit-surface:   #232A32;
    --instrument-white:  #E8ECF0;
    --instrument-dim:    #9AA3AD;
    --instrument-faint:  #6B7580;
    --flare-amber:       #E8A317;
    --flare-amber-glow:  rgba(232, 163, 23, 0.35);
    --flare-amber-soft:  rgba(232, 163, 23, 0.12);
    --rule-cockpit:      rgba(232, 236, 240, 0.14);
    --rule-cockpit-soft: rgba(232, 236, 240, 0.08);
    /* Legacy aliases (app.css references) */
    --paper-app:         var(--cockpit-bg);
    --paper-app-soft:    var(--cockpit-bg-soft);
    --ink-app:           var(--instrument-white);
    --ink-2:             var(--instrument-dim);
    --ink-3:             var(--instrument-faint);
    --accent-red:        var(--flare-amber);
    --accent-red-soft:   var(--flare-amber-soft);
    --rule-app:          var(--rule-cockpit);
    --rule-app-soft:     var(--rule-cockpit-soft);

    /* === Type === */
    --font-serif:  'Source Serif 4', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
    --font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

    /* === Motion === */
    --ease:        cubic-bezier(0.2, 0, 0, 1);
    --t-fast:      120ms;
    --t-med:       200ms;
}

/* --- Reset / base hygiene --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-sans);
    font-feature-settings: 'ss01', 'cv11';
    -webkit-text-size-adjust: 100%;
}

/* Tabular figures everywhere a number is likely to land. */
.num, .l-num, .sq-num,
.metric-value, .sq-metric__value,
.l-metric__value,
td, th,
input[type="number"], input[type="email"],
code, pre, .font-monospace {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Reusable focus ring (mode-specific color set on body class). */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 1px;
}

body.l-paper :focus-visible { outline-color: var(--oxblood); }
body.sq-body :focus-visible { outline-color: var(--flare-amber); }

body.sq-body .skip-link:focus {
    background: var(--instrument-white);
    color: var(--cockpit-bg);
    outline-color: var(--flare-amber);
}

/* Cap default link styles inside both modes (overridden per mode). */
a { color: inherit; }

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

/* --- Skip link (a11y) --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}
.skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: 0.5rem 0.875rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    border-radius: 2px;
    font: 500 0.875rem/1 var(--font-sans);
}

/* --- Cookie consent banner (GDPR) — deferred until scroll or timeout --- */
.consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--cockpit-surface);
    border-top: 1px solid var(--rule-cockpit);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    color: var(--instrument-white);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.25s var(--ease, ease), opacity 0.25s var(--ease, ease);
    pointer-events: none;
}
.consent-banner--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.consent-banner__inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem 1rem;
    padding: 0.65rem 0;
    max-width: 1100px;
    margin: 0 auto;
}
.consent-banner__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    width: 100%;
}
.consent-banner__text a {
    white-space: nowrap;
}
.consent-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    flex-shrink: 0;
}
.consent-banner__manage-btn {
    color: var(--instrument-white);
    text-decoration: underline;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.consent-banner__preferences {
    width: 100%;
    padding-top: 0.35rem;
    border-top: 1px solid var(--rule-cockpit);
}
.consent-banner__preferences-form .form-check-label {
    color: var(--instrument-white);
}
body.consent-banner-open {
    padding-bottom: 3.25rem;
}
body.consent-banner-open--expanded {
    padding-bottom: 5.5rem;
}