/*
 * Saga brand chroma — the logo's own gradient, used as a semantic accent.
 *
 * neutral-theme.css makes every surface achromatic on purpose and names the logo
 * artwork as "the single brand-color exception". This file widens that exception
 * by exactly one rule and no further:
 *
 *   Chroma marks a number that is LIVE, or money moving BACK TOWARD the customer.
 *   Anything the customer pays stays graphite.
 *
 * So the discount chip, the promo line, credits and reconciliations, and the live
 * pulse carry color. Prices, headings, buttons, nav, eyebrows and body copy do not.
 * If a future accent cannot be justified by that sentence, it does not belong here.
 *
 * Every value is lifted from web/saga-mark.svg — the five stops of #sgFace, the ink
 * of the traced S (#0B2421), and the gradient's real angle: the SVG runs
 * (-6.212, 11.682) -> (70.212, 52.318), i.e. 28.0 degrees below horizontal, which
 * is 118deg in CSS. Nothing here is invented.
 *
 * 🔴 OPT-IN, per page: add `saga-chroma` to <body> AND link this file AFTER
 * neutral-theme.css. It deliberately overrides no existing token — linking it can
 * never repaint a surface that did not ask for it, and every rule below is scoped
 * to .saga-chroma so it outranks a page's own inline <style> on source order and
 * specificity together.
 */

:root {
  --chroma-teal:  #12C7C7;
  --chroma-sea:   #54C4B5;
  --chroma-sage:  #96C0A4;
  --chroma-sand:  #D8BD92;
  --chroma-peach: #FFBA80;
  --chroma-ink:   #0B2421;
  --chroma-grad: linear-gradient(118deg,
    #12C7C7 0%, #54C4B5 25%, #96C0A4 50%, #D8BD92 75%, #FFBA80 100%);
}

/* ---------------------------------------------------------------------------
 * The signature: the discount chip wears the logo's face.
 *
 * A linear-gradient spans its own element, so the complete teal->peach ramp fits
 * inside a ~50px pill — the mark that means "you are paying less" is the brand
 * mark in miniature, at the one spot on the page where the number moved your way.
 *
 * Ink is the S glyph's own #0B2421: 7.7:1 on the teal end, 9.8:1 on the peach end,
 * so the small 10.5px mono type clears AA at both extremes of the ramp.
 * background-color is a real fallback, not decoration — it is what forced-colors
 * and any no-gradient path actually paint (#0B2421 on #96C0A4 is 6.9:1).
 * ------------------------------------------------------------------------ */
.saga-chroma .rates span.off {
  color: var(--chroma-ink);
  background-color: var(--chroma-sage);
  background-image: var(--chroma-grad);
  padding: 3px 8px;
  letter-spacing: 0.02em;
}

/* The same fact restated in the specimen receipt, so the promo reads as one idea
   in both places rather than two unrelated highlights. */
.saga-chroma .receipt-row .v.ok { color: var(--chroma-teal); }

/* The ledger is where the rule becomes legible, because all three directions sit
   in one card: money in is the cold end, a reconciliation is the warm end of the
   same gradient, and the render you actually paid for stays graphite. */
.saga-chroma .ledger-amt.in  { color: var(--chroma-teal); }
.saga-chroma .ledger-amt.adj { color: var(--chroma-peach); }

/* The one mark on the page asserting the numbers are fresh. 8.4:1 on --surface. */
.saga-chroma .board-title .live { color: var(--chroma-teal); }

/* ===========================================================================
 * SITEWIDE IDENTITY — added 2026-07-29.
 *
 * Ray: "we want to keep the color scheme of different gray colors but we can
 * add a bit of color to saga. stick to the colors of the theme" — naming the
 * Generate button and the current page in the topbar.
 *
 * The rule above governs MONEY. These rules govern IDENTITY, and the sentence
 * that admits them is:
 *
 *   The ramp marks Saga's primary action and where you are.
 *   The amounts stay graphite.
 *
 * That second clause is why Generate wears the gradient and the price chip
 * inside it does not. The ACTION is the brand; the AMOUNT is still something
 * the customer pays, so it keeps the graphite ink the money rule demands. The
 * two sentences do not contradict — one says what colour means, the other says
 * what it is never allowed to flatter.
 *
 * TWO TIERS, and the split is a contrast fact rather than a preference:
 *   - chroma as FILL (dark ink on the ramp) is independent of the page behind
 *     it, so it is safe on every surface including body.saga-light;
 *   - chroma as INK depends on a graphite background — #12C7C7 is 8.4:1 on
 *     --surface but only ~2.0:1 on the light theme's #FAFAF8, which fails.
 * So every ink-based rule below is gated `:not(.saga-light)`. image.html is
 * the one light page and it takes the fill tier only.
 *
 * Geometry is untouched throughout: these rules set colour, background and
 * box-shadow and nothing else. The 641-720px nav band already overflows on 7
 * of 10 pages and the composer row wraps intrinsically in video mode, so a
 * padding or width change here would land straight on an open defect.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Where you are: the current page in the topbar.
 *
 * nav.css paints this pill solid #F3F3F2 with #171718 ink inside
 * @media (min-width: 721px), all four declarations !important. This mirrors
 * that block exactly — same selectors, same breakpoint, same !important — and
 * changes only the two colours, so the pill's box is byte-identical and the
 * bar cannot reflow.
 *
 * The cold end of the ramp, not the whole ramp: the logo lockup sits in this
 * same bar already wearing the full teal->peach face, and a second complete
 * gradient 200px from the first reads as two competing marks. Ink is the S
 * glyph's own #0B2421 — 7.7:1 on #12C7C7, better still on #54C4B5.
 * ------------------------------------------------------------------------ */
@media (min-width: 721px) {
  .saga-chroma nav.nav .nav-links a.active,
  .saga-chroma nav.nav .links a.active,
  .saga-chroma nav.topnav .nav-links a.active,
  .saga-chroma nav.topnav .links a.active {
    background-color: var(--chroma-sea) !important;
    background-image: linear-gradient(118deg, #12C7C7 0%, #54C4B5 100%) !important;
    color: var(--chroma-ink) !important;
    box-shadow: 0 5px 15px #00000033, inset 0 1px #FFFFFF4D !important;
  }
}

/* Below 721px nav.css styles no active state at all — the links become a full-width
   second row and the current one is unmarked. Colour alone marks it here rather than
   a pill: a pill would need padding this row has no budget for. Ink tier, so the
   light theme is excluded. */
@media (max-width: 720px) {
  body.saga-chroma:not(.saga-light) nav.nav .nav-links a.active,
  body.saga-chroma:not(.saga-light) nav.nav .links a.active,
  body.saga-chroma:not(.saga-light) nav.topnav .nav-links a.active,
  body.saga-chroma:not(.saga-light) nav.topnav .links a.active {
    color: var(--chroma-teal) !important;
  }
}

/* ---------------------------------------------------------------------------
 * The primary action: Generate.
 *
 * It was `linear-gradient(180deg, #D0D0D2, var(--lime))` — and --lime resolves to
 * #D0D0D2 under the neutral theme, so it was a gradient in name only, a flat grey
 * pill. This is the one button in Saga that does the thing Saga is for, and it is
 * the only place the complete ramp appears in the product.
 *
 * background-color is a real fallback, not decoration: `.go`'s own `background`
 * shorthand resets background-color to transparent, so a no-gradient path would
 * paint nothing at all without this line.
 * ------------------------------------------------------------------------ */
.saga-chroma .go {
  background-color: var(--chroma-sage);
  background-image: var(--chroma-grad);
  color: var(--chroma-ink);
  box-shadow: 0 10px 24px -16px #12C7C7E6, inset 0 1px 0 #FFFFFF3D;
}

.saga-chroma .go:hover:not(:disabled) {
  box-shadow: 0 14px 30px -18px #12C7C7, inset 0 1px 0 #FFFFFF47;
}

/* The amount stays graphite. `.cost` reads "$1.52" and `.cost-raw` the undiscounted
   figure; both keep the ink they had under the neutral theme so that nothing about
   what the customer pays is dressed in the brand. #111112 is 11:1 at the peach end
   of the ramp, so holding them graphite costs no legibility. */
.saga-chroma .go .cost { color: #111112; }
.saga-chroma .go .cost-raw { color: #1E1E2099; }

/* ---------------------------------------------------------------------------
 * Ink tier: dark surfaces only.
 * ------------------------------------------------------------------------ */

/* The focus ring. Invisible to a mouse, present on every keyboard interaction —
   the cheapest way for the whole app to feel like the mark without adding a single
   visible element. 8.4:1 on --surface. */
body.saga-chroma:not(.saga-light) {
  --focus: var(--chroma-teal);
}

/* LIVE, in the original sense of the rule at the top of this file: Saga is working
   for you right now. `queued` is deliberately NOT here — a job waiting its turn is
   not live, and it keeps the amber that says so. */
body.saga-chroma:not(.saga-light) :is(.badge.rendering, .badge.working) {
  color: var(--chroma-teal);
}

body.saga-chroma:not(.saga-light) .spark-head .live-dot {
  background: var(--chroma-teal);
}

body.saga-chroma:not(.saga-light) .shootout-summary .live {
  color: var(--chroma-teal);
}

/* The setting you have picked, inside an open dropdown — model, aspect, quality,
   duration. Only the open menu's selected row, never the closed control's label:
   colouring the four `.dd-btn .val` labels would put four teal words in one
   composer row and turn "a bit of colour" into a scheme. 8.3:1 on --surface2. */
body.saga-chroma:not(.saga-light) .dd-item.on {
  color: var(--chroma-teal);
  background: #12C7C71C;
}

body.saga-chroma:not(.saga-light) .dd-item.on .tick,
body.saga-chroma:not(.saga-light) .dd-item.on .dd-price {
  color: var(--chroma-teal);
}

/* Model Match is where Saga helps choose, while Apply hands that choice back to
   the composer. Cold chroma marks matching and selection; warm chroma marks the
   handoff. The sheet gets only a one-pixel brand edge so its data stays primary. */
body.saga-chroma:not(.saga-light) .model-match:not(.history) {
  border-color: #12C7C766;
  background: linear-gradient(118deg, #12C7C724 0%, #54C4B51A 58%, #FFBA8012 100%);
  color: var(--chroma-teal);
  box-shadow: inset 0 1px #FFFFFF12;
}

body.saga-chroma:not(.saga-light) .model-match:not(.history):hover {
  border-color: var(--chroma-teal);
  background: linear-gradient(118deg, #12C7C730 0%, #54C4B522 58%, #FFBA801A 100%);
}

body.saga-chroma:not(.saga-light) .model-match-overlay .match-card {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(118deg, #12C7C7A6 0%, #54C4B570 48%, #FFBA806B 100%) border-box;
}

body.saga-chroma:not(.saga-light) .match-goals button.on,
body.saga-chroma:not(.saga-light) .match-pick.on {
  border-color: var(--chroma-teal);
  background: #12C7C71C;
  color: var(--chroma-teal);
}

body.saga-chroma:not(.saga-light) .match-row.picked {
  border-color: #54C4B566;
  box-shadow: inset 3px 0 0 var(--chroma-sea);
}

body.saga-chroma:not(.saga-light) .match-use {
  border-color: #FFBA8066;
  color: var(--chroma-peach);
}

body.saga-chroma:not(.saga-light) .match-use:hover {
  border-color: var(--chroma-peach);
  background: #FFBA8017;
}

body.saga-chroma:not(.saga-light) .match-history:hover {
  border-color: #12C7C766;
  color: var(--chroma-teal);
}

/* ===========================================================================
 * CONVERSION ESTATE — added 2026-07-29.
 * Ray: "some places and pages in saga has very little colors… go over all
 * pages" — login, the marketing root and the SEO estate carried zero chroma
 * while the app pages already spoke the two rules. Nothing new is admitted
 * here: every rule below is one of the two standing sentences applied to a
 * page that did not have the selector yet.
 * ------------------------------------------------------------------------ */

/* The page's one primary action, for pages that have no composer. On the
   studio the primary action is Generate (.go); on a conversion page it is
   "Start creating" / "Sign in" / "Open in Studio". A page TAGS exactly one
   visible element per viewport with cta-primary — two ramps on screen at
   once read as a scheme, not a mark. Fill tier (dark ink on the ramp), so
   it is background-independent, light theme included. Mirrors .go: the
   background-color line is the real no-gradient fallback, not decoration. */
.saga-chroma .cta-primary {
  background-color: var(--chroma-sage);
  background-image: var(--chroma-grad);
  color: var(--chroma-ink);
  box-shadow: 0 10px 24px -16px #12C7C7E6, inset 0 1px 0 #FFFFFF3D;
}

.saga-chroma .cta-primary:hover:not(:disabled) {
  box-shadow: 0 14px 30px -18px #12C7C7, inset 0 1px 0 #FFFFFF47;
}

/* Where the CTA shares a bar with the logo lockup, the full face would be a
   second complete gradient competing with the first — same reasoning as the
   nav pill, same resolution: the cold end only. */
.saga-chroma .cta-primary.cold {
  background-color: var(--chroma-sea);
  background-image: linear-gradient(118deg, #12C7C7 0%, #54C4B5 100%);
}

/* The founding badge: the founding credit is money moving TOWARD the
   customer — the signature chip treatment (pricing's span.off) restated on
   the offer component every conversion page carries. TWO selectors because
   the component has two surfaces: per-page static markup ships
   .founding-badge on the dark hero cards, while offer.js:102 builds the
   sticky bar's chip as .founding-banner-label on the light .founding-banner
   slab. Fill tier so the SAME signature survives both backgrounds; ink
   chroma would fail on the light one. offer.css itself stays untouched — it
   is offer.js's pair and #52's file; this rule rides the normal opt-in.
   #0B2421 is 7.7:1 on the teal end, 9.8:1 on the peach end. */
.saga-chroma .founding-badge,
.saga-chroma .founding-banner-label {
  color: var(--chroma-ink);
  background-color: var(--chroma-sage);
  background-image: var(--chroma-grad);
}

/* Login: the active pane of the Sign in / Get access switch — "where you
   are", the auth card's own nav pill. Cold end, mirroring the topbar
   treatment; keyed off aria-selected because that is the state login.html's
   own JS maintains (lines 355-356). */
.saga-chroma .modes [role="tab"][aria-selected="true"] {
  background-color: var(--chroma-sea);
  background-image: linear-gradient(118deg, #12C7C7 0%, #54C4B5 100%);
  color: var(--chroma-ink);
}

/* Login: the consent checkbox — the one control whose "on" is the user
   saying yes. Selected-state teal, the same meaning .dd-item.on already
   carries. Ink tier: accent renders against the dark card. */
body.saga-chroma:not(.saga-light) .legal-check input {
  accent-color: var(--chroma-teal);
}

/* Marketing hero proof line (showcase.html): of the three reassurances only
   "Failed renders refund" is the money rule's own sentence — money moving
   back toward the customer — so its dot alone takes chroma. The other two
   dots stay grey; they are reassurance copy, not live money. */
.saga-chroma .hero-proof span.refund::before {
  background: var(--chroma-teal);
}

/* Trust page: the specimen ledger's "auto-refund" chip is the same fact the
   billing ledger's .ledger-amt.in already colors — money returning to the
   customer. Its three siblings (quoted/never-expires/private) stay graphite:
   quoted is what you pay, and the other two are promises, not money moving.
   Ink tier. */
body.saga-chroma:not(.saga-light) .ledger-amt.a {
  color: var(--chroma-teal);
}

/* ---------------------------------------------------------------------------
 * The shared marketing header's primary action.
 *
 * site-header.css:203 paints it `.site-header .button.primary { background:#D0D0D2 }`
 * — specificity (0,3,0), which OUTRANKS `.saga-chroma .cta-primary` (0,2,0). Without
 * this block, tagging that button with cta-primary repaints nothing at all and the
 * page looks like the opt-in failed. The rules below match (0,3,0) exactly and win on
 * source order instead, which holds because brand-chroma.css is linked after
 * site-header.css on all 26 pages that carry the header.
 *
 * Cold end by default here: this button shares its bar with the logo lockup, the
 * nav-pill precedent. `border-color` is set because site-header gives the pill a solid
 * #D0D0D2 border that would otherwise outline the ramp in grey. Colour only — the
 * hover `transform` site-header applies is left exactly as it was.
 * ------------------------------------------------------------------------ */
.saga-chroma .site-header .cta-primary {
  border-color: transparent;
  background-color: var(--chroma-sage);
  background-image: var(--chroma-grad);
  color: var(--chroma-ink);
}

.saga-chroma .site-header .cta-primary.cold {
  background-color: var(--chroma-sea);
  background-image: linear-gradient(118deg, #12C7C7 0%, #54C4B5 100%);
}

/* `.site-header .button.primary:hover` is (0,4,0) and uses the `background`
   SHORTHAND, which resets background-image to none — the exact way login.html's
   ramp died on hover (#104). Answer it at its own specificity. */
.saga-chroma .site-header .cta-primary:hover {
  border-color: transparent;
  background-color: var(--chroma-sage);
  background-image: var(--chroma-grad);
  color: var(--chroma-ink);
  box-shadow: 0 10px 24px -16px #12C7C7E6, inset 0 1px 0 #FFFFFF3D;
}

.saga-chroma .site-header .cta-primary.cold:hover {
  background-color: var(--chroma-sea);
  background-image: linear-gradient(118deg, #12C7C7 0%, #54C4B5 100%);
}

/* The focus ring, for real this time.
 *
 * Setting `--focus` above only reaches pages whose stylesheet READS `--focus`, and
 * that is styles.css alone — every marketing and legal page hard-codes
 * `:focus-visible { outline: 2px solid var(--accent) }` in its own inline <style>,
 * so the ring stayed graphite on exactly the pages this rollout exists to colour
 * (found on login.html, #104, then in the same shape on trust/support/learn/models).
 * `outline-color` is the longhand on purpose: width, style and offset stay whatever
 * the page chose, so nothing moves. Ink tier — teal is 8.4:1 on the dark surface and
 * about 2:1 on the light theme, so the light page keeps its own ring. */
body.saga-chroma:not(.saga-light) :focus-visible {
  outline-color: var(--chroma-teal);
}
