/* Zero Mission theme — the interim brand kit.
 *
 * "Zero Mission — Interim Dark Brand Kit" (Google Drive, folder "Zero Mission
 * Website - Interim Dark Theme", 2026-09-28): an interim system while Polina
 * develops the permanent identity, applied to the existing tokens rather than
 * replacing them, so it is reversible. Its rules, kept here:
 *
 *   - Black is the native canvas. Light is derived: the kit's paper as ground,
 *     its ink as text, the accents deepened until they pass AA on paper.
 *   - Typography stays disciplined and quiet; most of the page is near-black,
 *     paper and muted gray. Colour arrives as interruption — the pink accent,
 *     a spectrum lead on rules, the artwork.
 *   - One dominant artwork moment above the fold (`.hero-art`); secondary
 *     sections get smaller interruptions (`.section-ribbon`).
 *   - Paper-on-ink is the text pairing. Bright accents never carry body text.
 *
 * Every text pairing is checked against WCAG 2.2 AA by apps/public/tests_theme.py.
 * Tokens are space-separated RGB triplets so Tailwind's `/opacity` modifiers
 * keep working: text-accent/60, bg-surface/80, and so on.
 */

:root {
  /* Light — derived from the kit's dark system: paper ground, ink text. */
  --c-ground:      242 238 231;   /* paper */
  --c-surface:     250 248 244;
  --c-surface-alt: 234 229 221;
  --c-ink:          11  11  13;   /* ink */
  --c-ink-soft:     74  70  66;
  --c-ink-faint:   112 107 101;
  --c-line:        216 211 203;
  --c-line-strong: 183 177 170;   /* muted */
  --c-accent:       11  11  13;   /* ink: primary buttons are ink pills */
  --c-accent-ink:  242 238 231;
  --c-accent-wash: 228 223 215;
  --c-mark:        186  18 118;   /* pink, deepened for AA on paper */
  --c-mark-wash:   247 226 238;
  --c-signal:       40 116  48;   /* green, deepened */
  --c-signal-wash: 226 241 227;
  /* Status, for health and alerts. */
  --c-danger:      178  34  34;
  --c-caution:     138  80   0;

  --art-blend: multiply;
  --art-opacity: .55;
  --glow-opacity: .6;
  --grain-opacity: .025;

  color-scheme: light;
}

/* Dark — the kit's native canvas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ground:       11  11  13;   /* ink */
    --c-surface:      17  18  22;   /* coal */
    --c-surface-alt:  23  24  29;   /* panel */
    --c-ink:         242 238 231;   /* paper */
    --c-ink-soft:    183 177 170;   /* muted */
    --c-ink-faint:   138 133 127;
    --c-line:         42  43  49;
    --c-line-strong:  69  71  82;
    --c-accent:      242 238 231;   /* paper: primary buttons are paper pills */
    --c-accent-ink:   11  11  13;
    --c-accent-wash:  30  31  37;
    --c-mark:        255  60 172;   /* pink — the one interrupting accent */
    --c-mark-wash:    48  16  36;
    --c-signal:       99 214 109;   /* green */
    --c-signal-wash:  18  40  22;
    --c-danger:      255 120 120;
    --c-caution:     242 186  84;
  
    --art-blend: screen;
    --art-opacity: .72;
    --glow-opacity: 1;
    --grain-opacity: .035;
  
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --c-ground:       11  11  13;   /* ink */
  --c-surface:      17  18  22;   /* coal */
  --c-surface-alt:  23  24  29;   /* panel */
  --c-ink:         242 238 231;   /* paper */
  --c-ink-soft:    183 177 170;   /* muted */
  --c-ink-faint:   138 133 127;
  --c-line:         42  43  49;
  --c-line-strong:  69  71  82;
  --c-accent:      242 238 231;   /* paper: primary buttons are paper pills */
  --c-accent-ink:   11  11  13;
  --c-accent-wash:  30  31  37;
  --c-mark:        255  60 172;   /* pink — the one interrupting accent */
  --c-mark-wash:    48  16  36;
  --c-signal:       99 214 109;   /* green */
  --c-signal-wash:  18  40  22;
  --c-danger:      255 120 120;
  --c-caution:     242 186  84;

  --art-blend: screen;
  --art-opacity: .72;
  --glow-opacity: 1;
  --grain-opacity: .035;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Ground. Near-black (or paper), two faint colour glows from the kit — violet
   top right, cyan left — and the kit's grain tile. Enough that the ground is
   not flat, far short of anything that competes with text.
   --------------------------------------------------------------------------- */

body {
  background-color: rgb(var(--c-ground));
  position: relative;
}

.ground::before,
.ground::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ground::before {
  opacity: var(--glow-opacity);
  background-image:
    radial-gradient(circle at 90% 10%, rgb(140 70 255 / .10), transparent 28rem),
    radial-gradient(circle at 8% 42%, rgb(77 217 255 / .07), transparent 30rem);
}

.ground::after {
  opacity: var(--grain-opacity);
  background: url("../brand/noise.d719dd0e5c8e.png") repeat;
}

/* Everything above the texture. */
.above { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Panels — quiet surfaces with a hairline and a soft lift, as the kit's
   `.zm-panel`. The accent/mark variants tint only the hairline.
   --------------------------------------------------------------------------- */

.panel {
  position: relative;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: 1.25rem;
  box-shadow: inset 0 1px rgb(255 255 255 / .035), 0 20px 60px rgb(0 0 0 / .12);
}

/* A spectrum hairline that crosses the panel's top edge. Decorative only. */
.panel--marked::before {
  content: "";
  position: absolute;
  left: 1.75rem;
  top: 2.25rem;
  width: 4rem;
  height: 2px;
  background: linear-gradient(90deg, #ff3cac, #8c46ff, #4dd9ff);
  pointer-events: none;
}

.panel--mark  { border-color: rgb(var(--c-mark) / .45); }
.panel--accent{ border-color: rgb(var(--c-line-strong)); }

/* A scaffold rule: a short spectrum lead, then the hairline across the
   measure — colour as interruption, not decoration. */
.rule-scaffold {
  height: 2px;
  border: 0;
  background:
    linear-gradient(90deg, #ff3cac, #8c46ff 3rem, #4dd9ff 6rem, transparent 6rem),
    linear-gradient(90deg, rgb(var(--c-line)), rgb(var(--c-line)) 70%, transparent);
}

/* ---------------------------------------------------------------------------
   Artwork — derived from Polina's supplied source painting.
   --------------------------------------------------------------------------- */

/* The one dominant moment above the fold: cropped off the right edge, tilted,
   fading toward the headline so it never sits behind text. Screen on ink,
   multiply on paper, so it reads as paint on the ground rather than a photo. */
.hero-art {
  position: absolute;
  top: 50%;
  right: -8rem;
  width: min(56vw, 50rem);
  aspect-ratio: 3 / 2;
  background: url("../brand/hero-texture-dark.92d34f48e5ce.webp") center / cover no-repeat;
  mix-blend-mode: var(--art-blend);
  opacity: var(--art-opacity);
  transform: translateY(-50%) rotate(-7deg);
  /* Fades toward the headline and at top and bottom; runs off the right edge.
     Two masks intersected, so no edge of the crop shows as a hard line. */
  -webkit-mask-image:
    linear-gradient(to left, #000 30%, transparent 70%),
    linear-gradient(to bottom, transparent 5%, #000 30%, #000 70%, transparent 95%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 30%, transparent 70%),
    linear-gradient(to bottom, transparent 5%, #000 30%, #000 70%, transparent 95%);
  mask-composite: intersect;
  pointer-events: none;
}

/* A secondary interruption: a wide band between sections. */
.section-ribbon {
  height: 5rem;
  border-radius: 1.25rem;
  background: url("../brand/section-ribbon-dark.f5e771dae43d.webp") center / cover no-repeat;
  mix-blend-mode: var(--art-blend);
  opacity: var(--art-opacity);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

/* The lockup in two inks; the theme picks one. */
.logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-dark { display: inline; }
  :root:not([data-theme="light"]) .logo-on-light { display: none; }
}
:root[data-theme="dark"] .logo-on-dark { display: inline; }
:root[data-theme="dark"] .logo-on-light { display: none; }

/* ---------------------------------------------------------------------------
   Focus and selection — cyan focus ring and pink selection, from the kit.
   --------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid #4dd9ff;
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: #ff3cac;
  color: #0b0b0d;
}

/* ---------------------------------------------------------------------------
   Print — content only.
   What a page says, as plain black text: headings, prose, lists, tables and
   informative images, in reading order. None of the decoration — no ground, no
   grain, no artwork, no scaffold rules, no panel frames, no display type. The
   main use is capturing a page whole to hand to an AI, so links print their
   destination and nothing is hidden by the screen layout's columns.

   Navigation, calls to action and forms are not content and do not print.
   Invoices keep their own document layout (_invoice_document.html), which
   these rules are careful not to flatten.
   --------------------------------------------------------------------------- */

@media print {
  @page { margin: 16mm; }

  html, body, .ground {
    background: #fff !important;
  }
  *, *::before, *::after {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    transform: none !important;
  }

  /* Decoration and chrome. */
  .ground::before, .ground::after, .hero-art, .section-ribbon, .rule-scaffold,
  .panel--marked::before, [aria-hidden="true"],
  header, footer, nav, form, button, #enquire, [x-cloak] {
    display: none !important;
  }

  /* One column, in reading order, without the screen's spacing. */
  .container, [class*="max-w-"] {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  main section, main article, main figure {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 1rem !important;
  }
  .grid { display: block !important; }
  .grid > * { margin-bottom: .75rem !important; }
  /* Frames, chips and boxes are decoration; a table's rules are not. */
  main *:not(table):not(thead):not(tbody):not(tr):not(th):not(td) {
    border: 0 !important;
    border-radius: 0 !important;
  }
  main div, main section, main article, main figure, main p, main span {
    padding: 0 !important;
  }
  /* List items too; a list's own indent (on the ul/ol) keeps its bullets. */
  main li { padding-left: 0 !important; padding-right: 0 !important; }
  .panel.absolute, .panel .absolute { position: static !important; }

  /* Plain type: the same sizes on every page, whatever the screen made them. */
  body, main p, main li, main dd, main dt, main td, main th, main figcaption {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 11pt !important;
    line-height: 1.45 !important;
  }
  h1, h2, h3, h4 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 1rem 0 .4rem !important;
    break-after: avoid;
  }
  h1 { font-size: 20pt !important; }
  h2 { font-size: 15pt !important; }
  h3, h4 { font-size: 12pt !important; }
  .font-mono { font-family: Georgia, "Times New Roman", serif !important; font-size: 10pt !important; }
  li, tr, figure, .panel, blockquote { break-inside: avoid; }

  /* Where a link goes is content; how it looks is not. */
  a { text-decoration: underline !important; }
  main a[href]:not([href^="#"]):not([href^="javascript:"])::after {
    content: " <" attr(href) ">";
    font-size: 9pt;
    text-decoration: none;
  }

  img, svg:not([aria-hidden="true"]) { max-width: 100% !important; height: auto; }
  table { border-collapse: collapse !important; width: 100% !important; }
  th, td { border-bottom: 1px solid #bbb !important; padding: .25rem .4rem !important; }

  /* Invoices are documents with their own layout: keep their columns. */
  .invoice .grid { display: grid !important; }
  .invoice .grid > * { margin-bottom: 0 !important; }
  .invoice a[href]::after { content: none !important; }
}