/* =========================================================
   Onsera brand tokens — transcribed from Onsera Brand Guide v1.2,
   "05 → The Visual" (Colors / Main Palette p55, Colors / Gradients p56,
   Typography p57).

   The brand guide is the source of truth, not this file and not any component.
   Values carry the guide's own names so there is no translation layer to get
   wrong: a reviewer can diff this against p55/p56 directly.

   When services/reports adopts this system it gets a byte-for-byte copy rather
   than an import. A Python service and a Node service share no static root, and
   neither can fetch the other's stylesheet without coupling their runtimes;
   duplicating a constant table is cheaper than a build step to share 40 lines.
   From that point on, change one and change both.

   Guide rules that are not expressible as tokens, and so must be honored by
   whoever uses them:
     - "Keep color accents to small, deliberate moments and let the neutral
        environment tones carry most of the layout." Accents are for action,
        state and emphasis — never for surfaces.
     - "A gradient should support the content, not dominate it. When a layout is
        divided into blocks, alternate gradient-filled blocks with blocks on a
        solid background, so the gradients don't run together."
     - Headings are DM Sans and set large; body is Inter at comfortable reading
        sizes. A key word inside a heading may be set in italic.
   ========================================================= */

:root {
  /* ---- Accents. Used sparingly; never as a surface. ---- */
  --ons-blue: #5179f4;   /* Onsera Blue — main accent */
  --ons-black: #1b1b2c;  /* Black — secondary accent, and the color of content */
  --ons-pink: #ffa8a8;   /* Pink — negative highlight */
  --ons-green: #00df9d;  /* Onsera Green — secondary accent */

  /* ---- Environment. These carry most of the layout. ---- */
  --ons-warm: #f2f0e8;      /* Warm — MAIN SURFACE */
  --ons-pale-sky: #e0effc;  /* Pale sky — surface */
  --ons-morning: #fff0e7;   /* Morning — surface */
  --ons-pale-sage: #e0e8de; /* Pale sage — surface */
  --ons-lavender: #e2e6f2;  /* Lavender — surface */
  --ons-sand: #c9bca5;      /* Sand — secondary surface */
  --ons-warm-grey: #9e9e9e; /* Warm grey — secondary content, outlines */
  --ons-night-sky: #2f3b60; /* Night Sky — secondary surface */

  /* ---- Gradients. Named for time of day, and vertical as drawn in the
         guide. Do not re-angle them: the 34deg variant that predates this file
         was a hand-rolled approximation of 4PM. ---- */
  --ons-grad-sunrize: linear-gradient(#d7dfff, #fff0e7);
  --ons-grad-noon: linear-gradient(#e0effc, #fff0e7);
  --ons-grad-4pm: linear-gradient(#e0e8de, #e0effc);
  --ons-grad-golden-hour: linear-gradient(#c9bca5, #fff0e7);
  --ons-grad-dusk: linear-gradient(#c9bca5, #25335d);
  --ons-grad-midnight: linear-gradient(#2f3b60, #47433d);


  /* ---- Shell geometry. Not from the guide, but it lives here because a
         Report's sidebar has to match it exactly: the rail reads as persistent
         across a Portal -> Report navigation only because its width and surface
         are identical on both sides. Reports currently carry their own widths
         (256px on the legacy shell, 216px on the newer one); when they adopt
         this file they take this value, and the seam closes. ---- */
  --ons-rail-w: 240px;

  /* ---- Type (guide p57). ---- */
  --ons-font-display: "DM Sans", system-ui, sans-serif;
  --ons-font-body: "Inter", system-ui, sans-serif;
}

/* Cross-document view transitions.
   A Report is proxied onto the portal domain, so moving between Portal and a
   Report is a same-origin cross-document navigation and can animate — the one
   thing that made the two feel like separate applications.

   BOTH documents must opt in or nothing happens, silently and with no error,
   which is why the opt-in lives in this shared file rather than per service.
   Until Reports adopts it, only navigations within Portal animate. A browser
   without support simply navigates as before. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}