/*
 * File: /common/css/foundation.css
 * Package: MICROBA OUTLOOK
 * Version: 2.0.65
 * Release Date: 2026-08-19
 * Replacement Scope: Full theme replacement
 * Purpose: Shared Living Design Language tokens and semantic typography roles.
 */

:root {
    /* Core colour system. */
    --microba-black: #020806;
    --microba-forest: #06140f;
    --microba-forest-2: #0a2118;

    /* Canonical public-page canvas. Green belongs to imagery/local accents, not full-page fields. */
    --microba-canvas: var(--microba-black);
    --microba-canvas-alt: #040907;
    --microba-canvas-soft: #060a08;
    --microba-canvas-gold-glow: rgba(209, 162, 70, .055);
    --microba-glass-neutral: linear-gradient(145deg, rgba(255,255,255,.028), rgba(0,0,0,.22));
    --microba-ivory: #f4efe5;
    --microba-soft: #cfc8bb;
    --microba-muted: #978f82;
    --microba-gold: #d1a246;
    --microba-gold-bright: #efc66b;
    --microba-border: rgba(209, 162, 70, .42);

    /* Canonical two-family typography system. */
    --microba-font-display: Georgia, 'Times New Roman', serif;
    --microba-font-interface: Arial, Helvetica, sans-serif;

    /* Canonical semantic type scale from MICROBA Typography Guidelines v2.0. */
    --microba-type-display-xl: clamp(4rem, 7vw, 7rem);
    --microba-type-h1: clamp(3rem, 5.5vw, 5rem);
    --microba-type-statement: clamp(2.375rem, 4vw, 3.625rem);
    --microba-type-h2: clamp(2.25rem, 4vw, 3.5rem);
    --microba-type-h3: clamp(1.65rem, 2.5vw, 2.25rem);
    --microba-type-h4: clamp(1.375rem, 2vw, 1.625rem);
    --microba-type-lead: clamp(1.125rem, 1.5vw, 1.5rem);
    --microba-type-body-large: clamp(1.0625rem, 1.25vw, 1.25rem);
    --microba-type-body: clamp(1rem, 1.1vw, 1.125rem);
    --microba-type-body-small: .875rem;
    --microba-type-label: .8125rem;
    --microba-type-eyebrow: .75rem;
    --microba-type-caption: .75rem;

    /* Canonical weights. */
    --microba-weight-regular: 400;
    --microba-weight-medium: 500;
    --microba-weight-semibold: 600;
    --microba-weight-bold: 700;

    /* Canonical leading. */
    --microba-leading-display: .95;
    --microba-leading-heading: 1.10;
    --microba-leading-statement: 1.08;
    --microba-leading-lead: 1.55;
    --microba-leading-body: 1.65;
    --microba-leading-small: 1.55;

    /* Canonical tracking. */
    --microba-tracking-display: -.025em;
    --microba-tracking-heading: -.01em;
    --microba-tracking-body: 0;
    --microba-tracking-label: .06em;
    --microba-tracking-eyebrow: .20em;

    /* Shared composition. */
    --microba-container: 1440px;
    --microba-shell-gutter: 24px;
    --microba-reading-width: 760px;
    --microba-header-height: 92px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--microba-black); }
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--microba-black);
    color: var(--microba-ivory);
    font-family: var(--microba-font-interface);
    font-size: 16px;
    line-height: var(--microba-leading-body);
    -webkit-font-smoothing: antialiased;
}
body.admin-bar .microba-site-header { top: 32px; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.screen-reader-text:focus,
.microba-skip-link:focus {
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    top: 10px;
    left: 10px;
    z-index: 100000;
    background: #fff;
    color: #000;
}
.microba-skip-link { position: fixed; left: -9999px; top: 0; }

.microba-container {
    width: min(calc(100% - (var(--microba-shell-gutter) * 2)), var(--microba-container));
    margin-inline: auto;
}
.microba-container--reading { max-width: var(--microba-reading-width); }
.microba-section { position: relative; padding: 88px 0; }

/* --------------------------------------------------------------------------
 * Semantic typography roles.
 * Pages compose these roles; page CSS should not invent another type system.
 * -------------------------------------------------------------------------- */
.microba-display-xl {
    margin: 0;
    color: var(--microba-ivory);
    font-family: var(--microba-font-display);
    font-size: var(--microba-type-display-xl);
    font-weight: var(--microba-weight-regular);
    line-height: var(--microba-leading-display);
    letter-spacing: var(--microba-tracking-display);
}
.microba-eyebrow {
    margin: 0;
    color: var(--microba-gold-bright);
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-eyebrow);
    font-weight: var(--microba-weight-semibold);
    letter-spacing: var(--microba-tracking-eyebrow);
    line-height: 1.4;
    text-transform: uppercase;
}
.microba-h1 {
    margin: 18px 0 28px;
    color: var(--microba-ivory);
    font-family: var(--microba-font-display);
    font-size: var(--microba-type-h1);
    font-weight: var(--microba-weight-regular);
    line-height: 1;
    letter-spacing: var(--microba-tracking-display);
}
.microba-h1 a { text-decoration: none; }
.microba-statement {
    margin: 16px 0 24px;
    font-family: var(--microba-font-display);
    font-size: var(--microba-type-statement);
    font-weight: var(--microba-weight-regular);
    line-height: var(--microba-leading-statement);
    letter-spacing: -.02em;
}
.microba-h2 {
    margin: 0;
    color: var(--microba-ivory);
    font-family: var(--microba-font-display);
    font-size: var(--microba-type-h2);
    font-weight: var(--microba-weight-regular);
    line-height: 1.08;
    letter-spacing: -.02em;
}
.microba-h3 {
    margin: 0;
    color: var(--microba-ivory);
    font-family: var(--microba-font-display);
    font-size: var(--microba-type-h3);
    font-weight: var(--microba-weight-regular);
    line-height: 1.15;
    letter-spacing: var(--microba-tracking-heading);
}
.microba-h4 {
    margin: 0;
    color: var(--microba-ivory);
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-h4);
    font-weight: var(--microba-weight-medium);
    line-height: 1.2;
}
.microba-h4--editorial { font-family: var(--microba-font-display); font-weight: var(--microba-weight-regular); }
.microba-lead {
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-lead);
    font-weight: var(--microba-weight-regular);
    line-height: var(--microba-leading-lead);
}
.microba-body-large {
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-body-large);
    font-weight: var(--microba-weight-regular);
    line-height: var(--microba-leading-body);
}
.microba-body {
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-body);
    font-weight: var(--microba-weight-regular);
    line-height: var(--microba-leading-body);
    letter-spacing: var(--microba-tracking-body);
}
.microba-body-small {
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-body-small);
    font-weight: var(--microba-weight-regular);
    line-height: var(--microba-leading-small);
}
.microba-label {
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-label);
    font-weight: var(--microba-weight-semibold);
    line-height: 1.4;
    letter-spacing: var(--microba-tracking-label);
}
.microba-caption {
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-caption);
    font-weight: var(--microba-weight-regular);
    line-height: 1.5;
}
.microba-data {
    font-family: var(--microba-font-interface);
    font-weight: var(--microba-weight-medium);
    font-variant-numeric: tabular-nums;
}
.microba-stat-value {
    font-family: var(--microba-font-display);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: var(--microba-weight-regular);
    font-variant-numeric: tabular-nums;
}
.microba-stat-label {
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-eyebrow);
    font-weight: var(--microba-weight-medium);
    line-height: 1.35;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.microba-evidence-label {
    font-family: var(--microba-font-interface);
    font-size: .6875rem;
    font-weight: var(--microba-weight-semibold);
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Long-form reading remains Interface-led. */
.microba-prose {
    color: var(--microba-soft);
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-body);
    line-height: var(--microba-leading-body);
}
.microba-prose h2,
.microba-prose h3,
.microba-prose h4 { color: var(--microba-ivory); font-weight: var(--microba-weight-regular); }
.microba-prose h2 {
    margin-top: 2.2em;
    margin-bottom: .65em;
    font-family: var(--microba-font-display);
    font-size: var(--microba-type-h2);
    line-height: 1.08;
    letter-spacing: -.02em;
}
.microba-prose h3 {
    margin-top: 1.8em;
    margin-bottom: .6em;
    font-family: var(--microba-font-display);
    font-size: var(--microba-type-h3);
    line-height: 1.15;
    letter-spacing: var(--microba-tracking-heading);
}
.microba-prose h4 {
    margin-top: 1.6em;
    margin-bottom: .55em;
    font-family: var(--microba-font-interface);
    font-size: var(--microba-type-h4);
    font-weight: var(--microba-weight-medium);
    line-height: 1.25;
}
.microba-prose p + p { margin-top: 1.25em; }

/* Public cinematic CTA. */
.microba-cta {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid var(--microba-gold);
    border-radius: 8px;
    color: var(--microba-gold-bright);
    background: rgba(4, 16, 12, .35);
    font-family: var(--microba-font-interface);
    font-size: .875rem;
    font-weight: var(--microba-weight-semibold);
    letter-spacing: .06em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.microba-cta:hover { color: #fff; background: rgba(209, 162, 70, .10); transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0,0,0,.25); }

/* Functional / application action. */
.microba-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--microba-border);
    border-radius: 10px;
    background: rgba(4, 16, 12, .35);
    color: var(--microba-ivory);
    font-family: var(--microba-font-interface);
    font-size: .875rem;
    font-weight: var(--microba-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}
.microba-button:hover,
.microba-button:focus-visible { border-color: var(--microba-gold-bright); color: #fff; outline: none; }

.microba-generic-main {
    min-height: 65vh;
    padding: calc(var(--microba-header-height) + 92px) 0 120px;
    background: radial-gradient(circle at 50% 0, var(--microba-canvas-gold-glow), transparent 34%), var(--microba-canvas);
}
.microba-generic-article + .microba-generic-article { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--microba-border); }
.microba-404 { display: grid; align-items: center; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (max-width: 782px) {
    body.admin-bar .microba-site-header { top: 46px; }
}
@media (max-width: 720px) {
    :root { --microba-shell-gutter: 16px; }
    .microba-section { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}