/* ==========================================================================
   CLASSIC FOUNDATION — the shared design system behind the seven Hub themes
   (vertex, wayfarer, foundry, prestige, clinic, drift, medici).

   WHY THIS FILE EXISTS
   The classics shipped at 81–258 lines of CSS each against Firstborn's 509,
   with no signature motion at all, which is why they read as wireframes in the
   template picker — the weakest work in the product is what a paying customer
   sees first. Firstborn was rebuilt in v2.11.25 into a real design system, and
   the obvious next step was to repeat that seven times. We deliberately did NOT
   do that: seven hand-written systems drift. Earlier the same day, the services
   index proved the point — ks_svc_url() and fm_svc_url() held the correct
   URL-resolution logic while the other ten themes, which had no such helper,
   quietly manufactured 404s for two versions. One shared foundation cannot
   develop that gap.

   WHAT IS SHARED vs WHAT IS THEME IDENTITY
   Shared here: the token contract, the typographic scale, elevation, focus
   states, motion primitives, print rules. Those are craft, not personality —
   there is no reason for Clinic and Medici to disagree about what a visible
   focus ring is. Each theme's own file then sets ONLY identity: its two font
   families, its palette fallbacks, and one signature motif. A theme file
   should read like a personality, not a framework.

   SCOPING AND CASCADE ORDER
   Scoped to .eaa-classic, added by EAA_Themes::inject_body_classes() alongside
   the existing .eaa-<theme> class. Both are single-class selectors, so they
   carry IDENTICAL specificity and SOURCE ORDER decides the winner. The loader
   therefore declares the theme's own stylesheet as dependent on this handle,
   which guarantees this file prints first and a theme can always override it.
   Get that order wrong and every theme silently loses its identity.

   Firstborn does NOT load this. It already has a complete system, it is the
   one classic that works, and it self-scopes onto each section root rather
   than the body (inject_body_classes deliberately skips the free theme). It
   stays untouched.

   THE PALETTE CONTRACT — READ BEFORE EDITING
   Every colour reads var(--wp--preset--color--X, #fallback). It must NEVER
   ASSIGN those variables. EAA_Palette publishes the owner's brand colour on
   :root, and a local assignment on .eaa-classic or .eaa-<theme> beats an
   inherited one no matter how specific the inherited rule is — that is exactly
   how the brand colour picker came to do nothing on seven of eight themes
   (v2.11.32). Read with a fallback; never assign.
   ========================================================================== */

.eaa-classic {
    /* ── Palette. Read-with-fallback only. See the contract above. ───────── */
    --cx-primary:      var(--wp--preset--color--primary,       #2451D9);
    --cx-on-primary:   var(--wp--preset--color--on-primary,    #FFFFFF);
    --cx-ink:          var(--wp--preset--color--contrast,      #14171C);
    --cx-muted:        var(--wp--preset--color--muted,         #5C636F);
    --cx-border:       var(--wp--preset--color--border,        #E4E7EC);
    --cx-surface:      var(--wp--preset--color--surface,       #F3F5F8);
    --cx-canvas:       var(--wp--preset--color--background,    #FFFFFF);

    /* Accent used for SMALL TEXT. Held separately because a mid-tone brand
       colour that passes contrast at 32px fails it at 14px, and the Suite
       audit found ~239 failures of exactly that shape. A theme that needs a
       darker small-text accent overrides this one token, not every call site. */
    --cx-accent-text:  var(--cx-primary);

    /* ── Hairlines ──────────────────────────────────────────────────────── */
    --cx-hair:         rgba(20,23,28,0.08);
    --cx-hair-strong:  rgba(20,23,28,0.14);

    /* ── Radius scale ───────────────────────────────────────────────────── */
    --cx-r-xs:   6px;
    --cx-r-sm:   10px;
    --cx-r-card: 14px;
    --cx-r-lg:   22px;
    --cx-r-hero: 28px;
    --cx-r-pill: 999px;

    /* ── Elevation: three steps, not per-section invention ──────────────── */
    --cx-e1: 0 1px 2px rgba(20,23,28,0.04), 0 4px 16px rgba(20,23,28,0.05);
    --cx-e2: 0 2px 4px rgba(20,23,28,0.05), 0 12px 32px rgba(20,23,28,0.08);
    --cx-e3: 0 8px 20px rgba(20,23,28,0.08), 0 24px 60px rgba(20,23,28,0.10);

    /* ── Rhythm. ONE scale. The classics each invented their own paddings
       per section, which is a large part of why they read as unfinished. ── */
    --cx-pad-y:   clamp(3.5rem, 7.5vw, 7rem);
    --cx-pad-x:   clamp(1.25rem, 5vw, 3rem);
    --cx-gap:     clamp(1.15rem, 2.2vw, 1.75rem);
    --cx-card-p:  clamp(1.35rem, 2.6vw, 2.15rem);
    --cx-max:     1200px;
    --cx-measure: 64ch;

    /* ── Motion ─────────────────────────────────────────────────────────── */
    --cx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cx-t:    220ms var(--cx-ease);

    /* ── Type families. Each rebuilt theme sets these two.
       THE DEFAULT IS `inherit`, DELIBERATELY, AND MUST STAY THAT WAY. A
       concrete fallback here (system-ui) would be applied to the headings of
       every theme not yet rebuilt, and Prestige declares no heading
       font-family at all — its headings currently INHERIT its body face, so a
       real value here would silently replace Prestige's typography with the OS
       default. `inherit` means an un-rebuilt theme keeps exactly the
       typography it has today and only gains the rest of the system. */
    --cx-font-display: inherit;
    --cx-font-body:    inherit;

    background-color: var(--cx-canvas);
    color: var(--cx-ink);
    font-family: var(--cx-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Typography scale ────────────────────────────────────────────────────
   A single family at a single weight for both headings and body was the
   biggest single reason Firstborn read as a wireframe. Every classic had the
   same problem. Headings take the display family and a real weight. */
.eaa-classic h1,
.eaa-classic h2,
.eaa-classic h3,
.eaa-classic h4,
.eaa-classic .cx-display {
    font-family: var(--cx-font-display);
    color: var(--cx-ink);
    line-height: 1.14;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0;
}

.eaa-classic h1, .eaa-classic h2 { text-wrap: balance; }

.eaa-classic h3,
.eaa-classic h4 { line-height: 1.28; letter-spacing: -0.01em; }

/* Fluid steps. Applied as utilities so a section can opt in without the
   base dictating layout — see the regression note at the foot of this file. */
.eaa-classic .cx-t-hero  { font-size: clamp(2.35rem, 5.4vw, 4rem); }
.eaa-classic .cx-t-h2    { font-size: clamp(1.8rem, 3.5vw, 2.65rem); }
.eaa-classic .cx-t-h3    { font-size: clamp(1.05rem, 1.5vw, 1.28rem); }
.eaa-classic .cx-t-lead  { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65; }
.eaa-classic .cx-t-small { font-size: 0.875rem; }

.eaa-classic p { color: var(--cx-muted); line-height: 1.65; max-width: var(--cx-measure); }
.eaa-classic a { color: inherit; }

/* Figures read badly with proportional digits in a stat block. */
.eaa-classic .cx-num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* ── Signature motif: a short brand rule leading into a small-caps eyebrow.
   Firstborn had NO identifying detail at all, which is precisely why it read
   as a default; the classics have the same absence. The rule is deliberately
   drawn with the brand colour so it re-skins with the owner's palette. ──── */
.eaa-classic .cx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--cx-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cx-accent-text);
    margin: 0 0 0.85rem;
}

.eaa-classic .cx-eyebrow::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    flex: 0 0 auto;
}

.eaa-classic .cx-head-center .cx-eyebrow::before { display: none; }

/* A 1px hairline inside the radius of a large panel — the second half of the
   motif, and what stops big surfaces looking like flat grey boxes. */
.eaa-classic .cx-inset { position: relative; }
.eaa-classic .cx-inset::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.14);
    pointer-events: none;
}

/* ── Structure utilities ─────────────────────────────────────────────────── */
.eaa-classic .cx-wrap   { max-width: var(--cx-max); margin: 0 auto; width: 100%; }
.eaa-classic .cx-narrow { max-width: 760px; }
.eaa-classic .cx-head   { margin-bottom: clamp(2.1rem, 4.5vw, 3.4rem); max-width: 680px; }
.eaa-classic .cx-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.eaa-classic .cx-head p { margin-top: 0.9rem; }
.eaa-classic .cx-head-center p { margin-left: auto; margin-right: auto; }

.eaa-classic .cx-card {
    background: var(--cx-canvas);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-r-card);
    padding: var(--cx-card-p);
    box-shadow: var(--cx-e1);
    transition: box-shadow var(--cx-t), transform var(--cx-t);
}
.eaa-classic .cx-card-lift:hover { box-shadow: var(--cx-e2); transform: translateY(-2px); }

/* Framed media with a hairline inset — an unframed image sitting directly on
   the canvas is the single most "unfinished" looking element on a page. */
.eaa-classic .cx-media {
    border-radius: var(--cx-r-lg);
    overflow: hidden;
    background: var(--cx-surface);
    box-shadow: var(--cx-e2);
    position: relative;
}
.eaa-classic .cx-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--cx-hair);
    pointer-events: none;
}
.eaa-classic .cx-media img { display: block; width: 100%; height: auto; }

/* ── Dark band. RETOKENISES rather than overriding rule by rule, so anything
   nested inside inherits correct colours instead of needing its own override.
   This is the pattern that took Firstborn to zero contrast failures. ─────── */
.eaa-classic .cx-dark {
    --cx-ink:     #F7F8FA;
    --cx-muted:   rgba(247,248,250,0.72);
    --cx-canvas:  #14171C;
    --cx-surface: #1C2027;
    --cx-border:  rgba(247,248,250,0.16);
    --cx-hair:    rgba(247,248,250,0.10);
    background: #14171C;
    color: #F7F8FA;
}
/* Declared as a TOKEN, not a descendant rule: a token does not depend on rule
   order inside the file, which is what made the Firstborn eyebrow fix stick. */
.eaa-classic .cx-dark { --cx-accent-text: #FFFFFF; }

/* ── Focus states. There were NONE on any classic theme — a keyboard user
   could not see where they were. This is an accessibility failure a reviewer
   will find in about four seconds with the Tab key. ─────────────────────── */
.eaa-classic a:focus-visible,
.eaa-classic button:focus-visible,
.eaa-classic input:focus-visible,
.eaa-classic select:focus-visible,
.eaa-classic textarea:focus-visible,
.eaa-classic [tabindex]:focus-visible {
    outline: 3px solid var(--cx-primary);
    outline-offset: 2px;
    border-radius: var(--cx-r-xs);
}

/* ── Reveal primitives.
   SAFETY CONTRACT, copied deliberately from firstborn-signature.js: the hidden
   state applies ONLY under .cx-js-ready, a class nothing but the script adds.
   No JS, blocked script, failed script, no IntersectionObserver or
   prefers-reduced-motion all fall through to fully visible content. Content
   must never be able to get trapped invisible. */
.eaa-classic .cx-reveal { opacity: 1; transform: none; }

.eaa-classic.cx-js-ready .cx-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms var(--cx-ease), transform 620ms var(--cx-ease);
    transition-delay: var(--cx-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.eaa-classic.cx-js-ready .cx-reveal.cx-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .eaa-classic.cx-js-ready .cx-reveal,
    .eaa-classic .cx-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .eaa-classic * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── Print. No classic theme had any, so every one of them printed its dark
   bands as solid ink and wasted a cartridge. ───────────────────────────── */
@media print {
    .eaa-classic { background: #fff !important; color: #000 !important; }
    .eaa-classic .cx-dark { background: #fff !important; color: #000 !important; }
    .eaa-classic .cx-dark * { color: #000 !important; }
    .eaa-classic .cx-card,
    .eaa-classic .cx-media { box-shadow: none !important; border: 1px solid #ccc !important; }
    .eaa-classic .cx-reveal { opacity: 1 !important; transform: none !important; }
}

/* ── DELIBERATE OMISSION — do not "fix" this by adding layout rules.
   This foundation sets tokens, type, focus, motion and print. It does NOT set
   padding or grid on bare `section` / `div` elements. The existing classic
   sections carry heavy INLINE styles, and inline declarations beat any
   stylesheet: a base layout rule would lose silently on the sections that have
   inline padding and apply on the ones that do not, producing inconsistent
   rhythm that looks like a bug rather than a system. Section rhythm therefore
   moves to the tokens above as each theme's sections are rebuilt to use
   .cx-wrap / .cx-head / .cx-card, one theme at a time.
   ========================================================================== */