/**
 * Marine's own colours: a naval theme over the studio's configurator.
 *
 * `common/css/configurator.css` is the same stylesheet `automotive.html` uses,
 * and automotive stays the dark room it always was — a car photographed on
 * black is what a car configurator looks like. A boat is not that. A yard's
 * own literature is white paper, navy ink and a red ensign, and this page is
 * dressed accordingly.
 *
 * Nothing here is a rule. It is one block of token declarations: every colour
 * the configurator draws with goes through `--bo-*`, so a theme is a list of
 * values and not a second copy of the layout. The moment that stops being true
 * — the moment something in configurator.css hardcodes a colour again — a
 * white page will show a purple bruise somewhere, and the fix belongs in the
 * token block there rather than in an override here.
 *
 * Linked AFTER configurator.css in `marine.html`, and scoped to `body` rather
 * than `:root` so the geometry tokens (`--is-chrome-h` and the measures) keep
 * resolving against the values they were declared with.
 *
 * The studio frame above the page stays dark on purpose. It is the studio's
 * own chrome, it is identical on every experience, and `fashion.html` — a
 * white boutique — already established that a light page under a dark frame
 * reads as a page inside an app rather than as a mistake.
 */

body {
  /* ── Ink ──
     Navy rather than black: on white, black text next to a photograph of a
     white hull is the harshest thing on the screen.

     `--bo-ink-rgb` is the one that does the heavy lifting. Every tint mixed
     from the ink in configurator.css — a hover fill, a raised card, a switch's
     track, a menu row under the cursor, four dozen of them — is written
     `rgba(var(--bo-ink-rgb), …)` with an alpha its author chose. Naming the
     channel here flips all of them at once, at the strengths they were tuned
     to, which is why this file is a list and not a second stylesheet. */
  --bo-ink-rgb:    10, 34, 64;
  --bo-text:       #0A2240;
  /* The two that are not just the channel. Dark ink on white needs a little
     more alpha than light ink on black to read as the same weight: these are
     0.56 and 0.34 on the dark theme. */
  --bo-dim:        rgba(10, 34, 64, 0.64);
  --bo-faint:      rgba(10, 34, 64, 0.44);
  /* And three tuned by eye against paper rather than derived. */
  --bo-glass-hi:   rgba(10, 34, 64, 0.06);
  --bo-line:       rgba(10, 34, 64, 0.14);
  --bo-line-hi:    rgba(10, 34, 64, 0.34);

  /* ── Paper ──
     The rail, the control panel and the app bar. Translucent, like the dark
     theme's glass, because they sit over a scene that is still moving under
     them — but paper-weight rather than smoked. */
  --bo-glass:      rgba(255, 255, 255, 0.88);
  --bo-chrome:     rgba(250, 252, 254, 0.86);
  /* A sheet that lifts off the page: a dialog, a menu, the marker panel.
     Nearly opaque, because a dialog with the sea legible through it is a
     dialog you read twice. */
  --bo-sheet:      rgba(255, 255, 255, 0.97);
  --bo-panel:      rgba(255, 255, 255, 0.94);
  --bo-toast:      rgba(255, 255, 255, 0.96);
  /* The page behind the scene, for the instant before it paints. Black there
     is a hole in a white page. */
  --bo-page:       #DCE5ED;

  /* What covers the scene while something is happening to it. A haze rather
     than a blackout — the same gesture, in the other direction. */
  --bo-scrim:      rgba(236, 242, 247, 0.84);
  --bo-scrim-solid: rgba(240, 245, 249, 0.96);
  /* A modal's backdrop still has to push the page back, and on paper the only
     way to do that is a wash of the ink. Lighter than the dark theme's, which
     can afford to go almost to black. */
  --bo-backdrop:   rgba(10, 34, 64, 0.32);
  /* A field you type into. Recessed on black means a darker well; on paper it
     means a tint, not a hole. */
  --bo-inset:      rgba(10, 34, 64, 0.05);

  /* The catalog screen: a harbour haze, lightest at the top where the sky is.
     Kept just short of opaque so the sea behind it still tells you there is a
     scene there — the same reason the dark theme's version is not flat black. */
  --bo-picker-bg:  radial-gradient(120% 80% at 50% 0%,
                     rgba(252, 253, 254, 0.94), rgba(223, 232, 240, 0.97));

  /* A card is a sheet of paper; the art well is the pale wash a photograph
     sits in before it loads. The veil at the foot of the picture goes almost
     to nothing — on the dark theme it carries a bright photo into a dark body,
     and here there is nothing to carry it into. */
  --bo-card:       #fff;
  --bo-art:        #DCE5ED;
  --bo-art-veil:   linear-gradient(to bottom, rgba(10, 34, 64, 0), rgba(10, 34, 64, 0.07));

  /* ── Accent ──
     Two of them, and they divide the work the way a yard's own drawings do.
     Navy is structure: the filled part of a slider, a switch that is on, the
     border under your cursor. Ensign red is the mark — what you have chosen,
     what has focus, the one control that undoes things. A page where
     everything interactive is red is a warning label; a page where the chosen
     thing is red is a chart.

     #C8102E is the ensign's own red (Pantone 186), and #12518C is about as
     dark as a blue can be and still read as blue rather than as ink. */
  --bo-accent:      #12518C;
  --bo-accent-hi:   #C8102E;
  --bo-accent-soft: rgba(200, 16, 46, 0.12);
  --bo-accent-line: rgba(200, 16, 46, 0.58);
  --bo-accent-fill: rgba(18, 81, 140, 0.06);
  --bo-accent-edge: rgba(18, 81, 140, 0.42);
  /* A shadow, not a glow. The dark theme lifts a card out of black with
     tinted light; on paper the same gesture is a cast shadow. */
  --bo-accent-glow: 0 16px 34px -18px rgba(10, 34, 64, 0.45);
  --bo-accent-halo: rgba(200, 16, 46, 0.42);
  --bo-accent-hair: rgba(18, 81, 140, 0.28);

  /* The white disc on a navy track stays white — it is the one place on this
     page where white is a foreground. */
  --bo-knob:       #fff;

  /* ── Status ──
     The dark theme's three are pastels tuned for black. On paper they have to
     go darker to keep their contrast: the amber especially, which at #FFC466
     on white is a colour you can see but not read. */
  --bo-ok:         #0F7B5A;
  --bo-ok-soft:    rgba(15, 123, 90, 0.11);
  --bo-ok-line:    rgba(15, 123, 90, 0.5);
  --bo-warn:       #9A6410;
  --bo-warn-line:  rgba(154, 100, 16, 0.45);
  --bo-warn-soft:  rgba(154, 100, 16, 0.12);
  --bo-bad:        #B3121F;
  --bo-bad-soft:   #8E0E19;
  --bo-bad-fill:   rgba(179, 18, 31, 0.12);
  --bo-bad-line:   rgba(179, 18, 31, 0.45);
  --bo-bad-text:   #8E0E19;
}

/* ── The two places a token is not enough ── */

/* The cards' hover lift: on black it is a rise into light, and the shadow
   token does that half. What it cannot say is that a paper card should not
   also change colour — `--bo-accent-fill` tints it, which on white reads as a
   smudge rather than as a highlight. The border and the shadow carry it. */
.product-card:hover { background: var(--bo-card); }

/* The studio's own glass pill — `.ui-pill` in design-system.css, which the
   viewpoint row and the resume row are built from. It is the studio's
   component and not the configurator's, so it has no `--bo-*` token to name:
   its surface comes from `--surface`, which is tuned for the black pages and
   is the last dark object on this one. Restated rather than tokenised, because
   the token belongs to the design system and every other page that reads it
   wants the dark value. */
.ui-pill {
  border-color: var(--bo-line);
  background: var(--bo-glass);
  color: var(--bo-dim);
}
.ui-pill:hover {
  border-color: var(--bo-line-hi);
  color: var(--bo-text);
}

/* ── The voice button, in the yard's clothes ─────────────── */

/* `common/js/configurator/ai.js` injects its stylesheet at run time and it
   lands after this file, so `body` in front of each selector is what takes
   them back — the same trick, for the same reason, as `jewelry.css`. The
   studio's idiom there is a near-black glass pill, which on a white page is
   the one dark object on the screen.
   Only the colours are restated; the geometry, the dot and its pulse are the
   studio's and stay. */
body .convai-mic {
  color: var(--bo-text);
  background: var(--bo-glass);
  box-shadow: 0 6px 24px rgba(10, 34, 64, 0.18);
}
/* The pause beside it, same clothes. Its amber is the one colour on this page
   that is allowed to shout, because an assistant left paused is exactly the
   thing somebody needs to notice from across a room. Amber and not red: it is
   a hold somebody chose, not a fault. */
body .convai-pause {
  color: var(--bo-text);
  background: var(--bo-glass);
  box-shadow: 0 6px 24px rgba(10, 34, 64, 0.18);
}
body .convai-pause[data-paused="true"] { color: #fff; background: rgba(156, 110, 28, 0.95); }

/* The three live states keep their meanings — waiting, hearing you, talking —
   at weights that read on paper. Navy for speaking, because that is the one
   the theme already spends blue on. */
body .convai-mic[data-state="connecting"] { background: rgba(10, 34, 64, 0.14); }
body .convai-mic[data-state="listening"]  { background: rgba(15, 123, 90, 0.16); }
body .convai-mic[data-state="speaking"]   { background: rgba(18, 81, 140, 0.16); }

/* Held, and **after** the three above rather than beside the pause button it
   belongs to. All four are `body .convai-mic[…]`, so they weigh the same and
   the last one written wins — put this above them and a paused pill still
   reads green for "Listening", which is the one thing pausing just stopped. */
body .convai-mic[data-paused="true"] { color: #fff; background: rgba(156, 110, 28, 0.95); }