/* ==========================================================================
   SYSTEM.CSS — WOO Design System Foundation
   Layers: reset → tokens → base → header → sections → components → motion → themes
   Block modules (css/blocks/*.css) are @scope'd and sit on top of this file.
   UTF-8, no frameworks, no libraries. Montserrat is the only external asset.
   ========================================================================== */

@layer reset, tokens, base, header, sections, components, motion, themes;

/* --------------------------------------------------------------- RESET -- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    img { display: block; max-width: 100%; height: auto; object-fit: cover; }
    a { color: inherit; text-decoration: none; cursor: pointer; }
    ul { list-style: none; }
    button, input { font: inherit; color: inherit; }
    button { background: none; border: 0; cursor: pointer; }
    figure { margin: 0; }
}

/* -------------------------------------------------------------- TOKENS -- */
@layer tokens {
    :root {
        /* Theme engine: light-dark() resolves against color-scheme.
           No data-theme = follow the system; data-theme forces a scheme. */
        color-scheme: light dark;

        /* Canvas & ink */
        --bg-canvas: #ffffff;
        --bg-contrast: #080808;
        --bg-panel: #0f0f0f;
        --bg-soft: #f7f7f7;
        --text-primary: #000000;
        --text-inverse: #ffffff;
        --text-secondary: #6b6b6b;      /* 4.9:1 on white — AA */

        /* Accent — lime is a signal, never a surface */
        --accent-lime: #93c90e;
        --accent-ink: #93c90e;          /* fallback: dark-chrome default   */
        --accent-ink-on-light: #5d7f09; /* lime as TEXT on light (4.67:1)  */

        --border-light: rgba(0, 0, 0, 0.1);
        --border-dark: rgba(255, 255, 255, 0.15);

        /* Themed chrome (header/footer), panels (menus), bands.
           Static fallbacks first (dark chrome = default design) so engines
           without light-dark() still paint SOLID surfaces. */
        --chrome-bg: #080808;
        --chrome-text: #ffffff;
        --chrome-muted: rgba(255,255,255,0.55);
        --chrome-border: rgba(255,255,255,0.15);

        --panel-bg: #0f0f0f;
        --panel-text: #ffffff;
        --panel-muted: rgba(255,255,255,0.6);
        --panel-border: rgba(255,255,255,0.08);
        --panel-hover: #000000;
        --panel-shadow: rgba(0,0,0,0.45);

        --band-bg: #0f0f0f;
        --band-text: #ffffff;
        --band-muted: #999999;
        --band-rule: rgba(255,255,255,0.3);

        /* Legacy aliases — kept so earlier block modules keep working */
        --color-bg: var(--bg-canvas);
        --color-bg-alt: #fafafa;
        --color-bg-dark: var(--bg-contrast);
        --color-bg-contrast: #111111;
        --color-text: var(--text-primary);
        --color-text-inverse: var(--text-inverse);
        --color-text-secondary: #777777;
        --color-text-muted: rgba(255, 255, 255, 0.5);
        --color-accent: var(--accent-lime);
        --color-accent-hover: #7db00a;
        --color-border: rgba(0, 0, 0, 0.1);
        --color-border-dark: rgba(255, 255, 255, 0.2);
        --color-border-light: rgba(0, 0, 0, 0.1);

        /* Type — clamp everything, no breakpoint jumps */
        --font-stack: 'Montserrat', sans-serif;
        --font-primary: var(--font-stack);

        --fs-hero: clamp(3rem, 9vw, 8rem);
        --fs-h1: clamp(3rem, 8vw, 7rem);
        --fs-h2: clamp(2rem, 5vw, 3.5rem);
        --fs-h3: clamp(1.35rem, 2.5vw, 2rem);
        --fs-body: clamp(1rem, 1.1vw, 1.15rem);
        --fs-kicker: 0.75rem;

        --text-body: 16px;
        --text-small: 14px;
        --text-xs: 12px;
        --text-h2: 40px;
        --text-h4: 24px;

        /* Space — whitespace is the luxury */
        --space-xs: clamp(20px, 2vw, 30px);
        --space-sm: clamp(40px, 4vw, 60px);
        --space-md: clamp(80px, 8vw, 120px);
        --space-lg: clamp(120px, 12vw, 180px);
        --space-xl: clamp(160px, 18vw, 260px);

        /* Layout */
        --content-width: 1600px;
        --content-narrow: 1200px;
        --content-text: 800px;
        --header-h: clamp(96px, 12vh, 132px);

        /* Motion */
        --ease-lux: cubic-bezier(0.19, 1, 0.22, 1);
        --transition-fast: 0.3s var(--ease-lux);
        --transition-medium: 0.5s var(--ease-lux);
        --transition-slow: 0.8s var(--ease-lux);

        --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    /* Visitor's explicit choice overrides the system */
    :root[data-theme="light"] { color-scheme: light; }
    :root[data-theme="dark"]  { color-scheme: dark; }

    /* Theme upgrade where light-dark() is supported */
    @supports (color: light-dark(#000, #fff)) {
        :root {
            --chrome-bg: light-dark(#ffffff, #080808);
            --chrome-text: light-dark(#000000, #ffffff);
            --chrome-muted: light-dark(rgba(0,0,0,0.55), rgba(255,255,255,0.55));
            --chrome-border: light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.15));

            --panel-bg: light-dark(#ffffff, #0f0f0f);
            --panel-text: light-dark(#000000, #ffffff);
            --panel-muted: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.6));
            --panel-border: light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.08));
            --panel-hover: light-dark(#f4f4f4, #000000);
            --panel-shadow: light-dark(rgba(0,0,0,0.16), rgba(0,0,0,0.45));

            --band-bg: light-dark(#f7f7f7, #0f0f0f);
            --band-text: light-dark(#000000, #ffffff);
            --band-muted: light-dark(#6b6b6b, #999999);
            --band-rule: light-dark(rgba(0,0,0,0.3), rgba(255,255,255,0.3));

            --accent-ink: light-dark(#5d7f09, #93c90e);
        }
    }

    /* Contrast boost: thicken rules, darken secondary text */
    @media (prefers-contrast: more) {
        :root {
            --text-secondary: #4a4a4a;
            --color-text-secondary: #4a4a4a;
            --chrome-border: light-dark(rgba(0,0,0,0.5), rgba(255,255,255,0.5));
            --panel-border: light-dark(rgba(0,0,0,0.4), rgba(255,255,255,0.4));
            --border-light: rgba(0,0,0,0.35);
            --color-border: rgba(0,0,0,0.35);
        }
    }
}

/* ---------------------------------------------------------------- BASE -- */
@layer base {
    /* Safety net: a stray min-content overflow must scroll its own box,
       never drag the whole page sideways on a phone. */
    html, body { overflow-x: clip; }

    body {
        background: var(--bg-canvas);
        color: var(--text-primary);
        font-family: var(--font-stack);
        font-size: var(--fs-body);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip;
    }

    :is(h1, h2, h3) { text-wrap: balance; line-height: 1.1; letter-spacing: -0.03em; }
    :is(h4, h5, h6, p) { text-wrap: pretty; }
    strong, b { font-weight: 900; }

    /* CMS block scaffold — every section module is a container */
    .cms-block { container-type: inline-size; }
    .cms-block-inner,
    .container {
        width: 100%;
        max-width: var(--content-width);
        margin-inline: auto;
        padding-inline: var(--space-xs);
    }

    .kicker {
        display: block;
        font-weight: 700;
        font-size: var(--fs-kicker);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        margin-block-end: var(--space-xs);
    }
    .kicker-band { color: var(--band-muted); }
    .text-accent { color: var(--accent-lime); }
    .text-secondary { color: var(--text-secondary); }
    .text-inverse { color: var(--text-inverse); }

    /* Buttons */
    .btn {
        display: inline-block;
        padding: clamp(18px, 2vw, 25px) clamp(32px, 4vw, 50px);
        background: #000;
        color: #fff;
        border: 0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.85rem;
        transition: transform 0.3s var(--ease-lux), box-shadow 0.3s, background 0.3s, color 0.3s;
    }
    .btn:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
    .btn-lime,
    .btn-accent { background: var(--accent-lime); color: #000; }
    .btn-lime:hover,
    .btn-accent:hover { background: #000; color: var(--accent-lime); }
    .btn-outline { background: transparent; border: 1px solid currentColor; }
    .btn-outline:hover { border-color: var(--accent-lime); color: var(--accent-lime); box-shadow: none; }
    .btn-link {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.8rem;
        border-block-end: 2px solid currentColor;
        padding-block-end: 5px;
        transition: color 0.3s, border-color 0.3s;
    }
    .btn-link:hover { color: var(--accent-ink-on-light); border-color: var(--accent-lime); }

    /* Photography is muted until engaged */
    .img-grayscale { filter: grayscale(25%); transition: filter var(--transition-slow); }
    :is(.hover-trigger, .img-grayscale):hover .img-grayscale,
    .img-grayscale:hover { filter: grayscale(0%); }

    /* Focus — currentColor self-adapts to any surface. Never removed. */
    :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

    /* Screen-reader-only utility (the canonical necessary use of absolute) */
    .sr-only,
    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .skip-link {
        position: fixed;
        inset-block-start: -100%;
        inset-inline-start: var(--space-xs);
        background: var(--accent-lime);
        color: #000;
        font-weight: 700;
        padding: 12px 24px;
        z-index: 300;
        transition: inset-block-start 0.2s;
    }
    .skip-link:focus-visible { inset-block-start: var(--space-xs); }
}

/* -------------------------------------------------------------- HEADER -- */
@layer header {
    /* Scroll-driven progress bar — animation-timeline: scroll() */
    .scroll-progress {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        height: 3px;
        background: var(--accent-lime);
        transform-origin: 0 50%;
        transform: scaleX(0);
        z-index: 250;
        pointer-events: none;
    }
    @supports (animation-timeline: scroll()) {
        .scroll-progress {
            animation: progress-grow linear both;
            animation-timeline: scroll(root block);
        }
    }
    @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* -------------------------------------------------------------- MOTION -- */
@layer motion {
    /* Scroll-driven reveals — animation-timeline: view() */
    @supports (animation-timeline: view()) {
        .reveal {
            animation: rise-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
    }
    @keyframes rise-in {
        from { opacity: 0; translate: 0 60px; }
        to   { opacity: 1; translate: 0 0; }
    }

    /* Sibling functions — staggered entrances indexed by DOM position */
    @supports (animation-delay: calc(sibling-index() * 1ms)) {
        .primary-nav li {
            animation: nav-drop 0.6s var(--ease-lux) both;
            animation-delay: calc(sibling-index() * 45ms);
        }
        .hero-meta > div {
            animation: nav-drop 0.8s var(--ease-lux) both;
            animation-delay: calc(200ms + sibling-index() * 120ms);
        }
    }
    @keyframes nav-drop {
        from { opacity: 0; translate: 0 -14px; }
        to   { opacity: 1; translate: 0 0; }
    }

    /* Kill switch — motion is earned, and always optional */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-timeline: none !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
        .reveal { opacity: 1; translate: none; }
        .scroll-progress { display: none; }
    }
}

/* -------------------------------------------------------------- THEMES -- */
/* Last layer: wins over every component rule (e.g. a logo's display). */
@layer themes {
    /* Logo swap: negative lockup on dark chrome, positive on light.
       display can't resolve light-dark(), so mirror the scheme logic here. */
    .logo-pos { display: none; }
    .logo-neg { display: block; }
    @media (prefers-color-scheme: light) {
        :root:not([data-theme="dark"]) .logo-neg { display: none; }
        :root:not([data-theme="dark"]) .logo-pos { display: block; }
    }
    :root[data-theme="light"] .logo-neg { display: none; }
    :root[data-theme="light"] .logo-pos { display: block; }
    :root[data-theme="dark"] .logo-neg { display: block; }
    :root[data-theme="dark"] .logo-pos { display: none; }
}


/* ==========================================================================
   SHARED MEMBER COMPONENTS - aside panels and action chips.
   These appear inside several different @scope'd blocks (library, sessions,
   people, country-data), so they live here in the components layer rather
   than inside any single block's scope.
   ========================================================================== */
@layer components {
    .doc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 6px; }
    .chip-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        padding: 12px 22px;
        border: 1px solid var(--panel-border);
        transition: border-color 0.25s, color 0.25s, background 0.25s;
    }
    .chip-btn:hover { border-color: var(--accent-lime); color: var(--accent-ink); }
    .chip-btn.is-video::before {
        content: "";
        inline-size: 0;
        block-size: 0;
        border-block: 5px solid transparent;
        border-inline-start: 8px solid var(--accent-lime);
    }
    .chip-btn.is-doc::before { content: "\2193"; color: var(--accent-lime); font-weight: 900; }
    .aside-panel {
        background: var(--panel-hover);            /* soft grey, as on the live site */
        background: light-dark(#f6f6f6, #0a0a0a);
        color: var(--panel-text);
        margin-block-end: var(--space-xs);
    }
    .aside-note { font-size: 0.78rem; padding-block: 16px 22px; }
    .aside-panel h2 {
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        line-height: 1.5;
        padding: clamp(24px, 2.4cqw, 32px) clamp(24px, 2.4cqw, 30px) 18px;
    }
    .aside-panel h2::after {
        content: "";
        display: block;
        inline-size: 38px;
        block-size: 3px;
        background: var(--accent-lime);
        margin-block-start: 10px;
    }
    .aside-panel nav a, .aside-panel .stat-line {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 18px clamp(24px, 2.4cqw, 30px);
        font-size: 0.94rem;
        font-weight: 500;
        line-height: 1.5;
        border-block-start: 1px solid var(--panel-border);
        transition: background 0.25s, color 0.25s;
    }

    .aside-panel nav a:hover { color: var(--accent-ink); padding-inline-start: calc(clamp(24px, 2.4cqw, 30px) + 8px); }
    .aside-panel nav a[aria-current="page"] { color: var(--accent-ink); }
    .stat-line b { font-weight: 900; color: var(--accent-ink); }
    .aside-note { padding: 12px 22px 18px; font-size: 0.68rem; color: var(--panel-muted); }
}