/* app-bridge.css — written for this app, NOT part of the design system.
   Do not sync it back to the artifact.

   tokens.css and bundle.css are loaded globally, and both are upstream files
   we keep byte-for-byte. Three of their token names already exist in this
   app's own stylesheets, so a global import would quietly restyle live pages.
   Two of the three sort themselves out by load order; one needs this file.

   Load order in base.html is: vendor fonts -> tokens.css -> bundle.css ->
   this file -> bootstrap -> pipeline.css. Everything the app already owns is
   therefore declared AFTER the design system and wins on its own.

     --font-display  pipeline.css declares it at :root, so pipeline.css wins
                     and headings keep Bricolage Grotesque. Nothing to do.
     --ink           only ever declared inside .look, .layout-picker and
                     .ticket, which beat :root on specificity. Nothing to do.
     --surface       the problem one. pipeline.css declares it ONLY inside
                     [data-theme="dark"], but 14 light-mode rules read it as
                     var(--surface, #fff) / var(--surface, #fffdf9) and rely
                     on the fallback. The design system's :root value would
                     take those 14 cards from #fff to #fcfbf9 — small, but a
                     restyle, and we were asked not to restyle yet.

   `initial` makes a custom property behave as though it were never declared,
   so those fallbacks apply again and light mode renders exactly as before.
   Dark mode is untouched: [data-theme="dark"] in pipeline.css comes later.

   WHEN THE APP ADOPTS THE DESIGN SYSTEM'S SURFACES, delete the two rules
   below and the 14 fallbacks become dead. That is the whole migration. */

:root, [data-theme="light"] {
    /* Kept reachable under a name the app does not use, so nothing is lost. */
    --ds-surface: #fcfbf9;
    --surface: initial;
}

[data-theme="espresso"] {
    --ds-surface: #261710;
    --surface: initial;
}

/* The design system's own components still get their real surface: bundle.css
   reads var(--surface) for the body ground and for text on espresso panels. */
.mf-btn, .mf-announce, .mf-card, .mf-hero, .mf-heading, .mf-eyebrow, .mf-octa {
    --surface: var(--ds-surface);
}