/*
 * EcoRides brand tokens (ENG-74). Tenant #3's own stylesheet, beside this
 * tenant's images, linked by the marketing route ONLY for the tenant that
 * owns it.
 *
 * DO NOT turn this into `import "./brand.css"` (SITE-008). Every marketing
 * site shares one route entry, and Next attaches CSS to the ENTRY, not to the
 * module that imported it — so an import here is downloaded by every tenant on
 * every tenant's domain. See app/(marketing)/_sites/types.ts. A test
 * (tests/marketing-brand-css-isolation.test.ts) fails the moment anyone tries.
 *
 * COLOUR SPACE, and why there is no @supports ladder here. Freedom Rides'
 * sheet authors oklch and hand-writes a hex fallback under `@supports (color:
 * oklch(...))`, because SITE-004 specified that design IN oklch and converting
 * it would shift the colours. EcoRides' handoff specifies its palette in HEX —
 * every value below is copied from the design's own token file — so hex IS the
 * source of truth and there is nothing to fall back FROM. The invariant
 * SITE-008 actually protects is "no modern colour function reaches a browser
 * unguarded", because nothing outside the bundler runs Lightning CSS over this
 * file. This sheet therefore uses hex and rgba() only: no oklch, no lab, no
 * color-mix. A test asserts that, so adding one without a guard fails loudly.
 *
 * PALETTE PROVENANCE: these values are shared with V Effects (veffectsmt.com),
 * a different client of the same owner, because the handoff was authored
 * against that studio's design system. Nothing is imported from it — the
 * numbers were read and re-authored here under EcoRides' own names. Whether
 * EcoRides should diverge is the owner's call, not ours.
 *
 * TYPE: Cormorant Garamond (display), Sacramento (script accent), Mulish
 * (body/UI) — the three faces the handoff specifies, from Google Fonts, with a
 * real fallback stack behind each. Loaded by the @import below rather than by
 * next/font in the root layout, for exactly the reason the tokens are here:
 * next/font's CSS lands in the shared route entry and would ship this tenant's
 * three faces to every other tenant.
 */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Sacramento&family=Mulish:wght@400;600;700&display=swap");

[data-site="dark-editorial"] {
  /* Ground: warm near-black, the page itself. */
  --eco-ground: #100c07;
  --eco-panel: #16110a;
  --eco-panel-hover: #1b150c;
  --eco-line: #423a2a;
  --eco-forest: #222a1b;

  /* Cream side: light surfaces, and text that sits on them. */
  --eco-bone-50: #fcf6ec;
  --eco-bone-100: #f6ecdd;
  --eco-bone-200: #efe2cf;
  --eco-line-light: #dcc9ad;
  --eco-stone: #7a6a52;
  --eco-umber: #4a3d2a;
  --eco-ink: #271f15;
  --eco-ink-deep: #18120b;

  /* Muted body copy on the dark ground. */
  --eco-muted: #b8a98e;

  /* Terracotta: the accent. */
  --eco-terra-200: #f1dac4;
  --eco-terra-300: #e4b08b;
  --eco-terra-400: #d38b5d;
  --eco-terra-500: #be6738;
  --eco-terra-600: #9f4f28;
  --eco-terra-700: #743a1f;

  /* Functional, drawn from the same palette. */
  --eco-danger: #a83c33;
  --eco-danger-deep: #6e241f;
  --eco-danger-tint: #f3d8c8;

  /* Families. The first name is the webfont; the rest is what a visitor
     actually reads for the moment before it arrives, or forever if the CDN
     is blocked. */
  --eco-font-display:
    "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --eco-font-script: "Sacramento", "Segoe Script", "Brush Script MT", cursive;
  --eco-font-sans:
    "Mulish", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  background: var(--eco-ground);
  color: var(--eco-bone-100);
  font-family: var(--eco-font-sans);
}

/* Inline links in body copy: the design's global <a> rule, scoped. */
[data-site="dark-editorial"] .eco-prose-link {
  color: var(--eco-terra-400);
}
[data-site="dark-editorial"] .eco-prose-link:hover {
  color: var(--eco-terra-300);
}

/* The mobile menu is a native <details>; drop the platform's own marker. */
[data-site="dark-editorial"] summary::-webkit-details-marker {
  display: none;
}

/* Form controls on the cream card. The date/time inputs render their picker
   indicator in the UA's own colour, which is invisible on cream in dark mode. */
[data-site="dark-editorial"] .eco-field::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
[data-site="dark-editorial"] .eco-field:focus {
  border-color: var(--eco-terra-500);
  outline: 2px solid rgba(190, 103, 56, 0.35);
  outline-offset: 1px;
}