/* Zero Mission theme — derived from the studio painting in docs/design.md.
 *
 * The palette is sampled from the artwork rather than eyeballed, and every
 * text pairing is checked against WCAG 2.2 AA by apps/public/tests_theme.py.
 * If you change a token, that test tells you whether it still ships.
 *
 * Tokens are space-separated RGB triplets so Tailwind's `/opacity` modifiers
 * keep working: text-accent/60, bg-surface/80, and so on.
 */

:root {
  /* Light — the faithful reading. The painting is a bright ground with pale
     panels floating on it. */
  --c-ground:      244 237 248;
  --c-surface:     255 255 255;
  --c-surface-alt: 237 228 244;
  --c-ink:          36  16  51;
  --c-ink-soft:     90  68 103;
  --c-ink-faint:   123 102 137;
  --c-line:        220 207 230;
  --c-line-strong: 188 168 204;
  --c-accent:       59  68 212;   /* cobalt — the structural stroke */
  --c-accent-ink:  255 255 255;
  --c-accent-wash: 230 231 251;
  --c-mark:        166  45 166;   /* magenta */
  --c-mark-wash:   247 228 247;
  --c-signal:       47 122  56;   /* the green drips */
  --c-signal-wash: 226 241 227;
  /* Status, for health and alerts: not from the painting, which has no red. */
  --c-danger:      178  34  34;
  --c-caution:     146  84   0;

  --texture-opacity: .9;
  --grain-opacity: .055;

  color-scheme: light;
}

/* Dark — the same painting after hours: the plum in its shadows becomes the
   ground, and the cyan and hot pink carry what cobalt and magenta did. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ground:       22  12  30;
    --c-surface:      33  20  48;
    --c-surface-alt:  43  27  61;
    --c-ink:         246 234 251;
    --c-ink-soft:    188 166 201;
    --c-ink-faint:   151 129 166;
    --c-line:         55  36  71;
    --c-line-strong:  76  52  96;
    --c-accent:      109 241 249;
    --c-accent-ink:   11  26  28;
    --c-accent-wash:  18  48  58;
    --c-mark:        244  79 183;
    --c-mark-wash:    56  18  43;
    --c-signal:      116 208 124;
    --c-signal-wash:  18  44  23;
    --c-danger:      255 120 120;
    --c-caution:     242 186  84;

    --texture-opacity: .75;
    --grain-opacity: .075;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --c-ground:       22  12  30;
  --c-surface:      33  20  48;
  --c-surface-alt:  43  27  61;
  --c-ink:         246 234 251;
  --c-ink-soft:    188 166 201;
  --c-ink-faint:   151 129 166;
  --c-line:         55  36  71;
  --c-line-strong:  76  52  96;
  --c-accent:      109 241 249;
  --c-accent-ink:   11  26  28;
  --c-accent-wash:  18  48  58;
  --c-mark:        244  79 183;
  --c-mark-wash:    56  18  43;
  --c-signal:      116 208 124;
  --c-signal-wash:  18  44  23;
  --c-danger:      255 120 120;
  --c-caution:     242 186  84;

  --texture-opacity: .75;
  --grain-opacity: .075;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Ground texture.
   The painting's surface is scraped paint over a halftone mesh. Reproduced at
   a fraction of its intensity: enough that the background is not flat, far
   short of anything that competes with text. Two CSS layers, no image files.
   --------------------------------------------------------------------------- */

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

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

/* Mesh — the grid weave under the paint. */
.ground::before {
  opacity: var(--texture-opacity);
  background-image:
    repeating-linear-gradient(
      0deg,
      rgb(var(--c-accent) / .045) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgb(var(--c-mark) / .04) 0 1px,
      transparent 1px 3px
    ),
    radial-gradient(
      ellipse 80% 60% at 15% 12%,
      rgb(var(--c-accent) / .16),
      transparent 62%
    ),
    radial-gradient(
      ellipse 70% 55% at 85% 30%,
      rgb(var(--c-mark) / .16),
      transparent 62%
    ),
    radial-gradient(
      ellipse 90% 50% at 50% 95%,
      rgb(var(--c-signal) / .10),
      transparent 65%
    );
}

/* Grain — fractal noise, the tooth of the paper. */
.ground::after {
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

/* ---------------------------------------------------------------------------
   Panels.
   The composition's core move: quiet pale rectangles held inside a loud
   scaffold. The noise lives at the edges and between panels — never inside
   one. That restraint is what makes a painting this loud usable for a firm
   that sells to accountants.
   --------------------------------------------------------------------------- */

.panel {
  position: relative;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: 2px;
}

/* The stroke that overruns its frame, as in the painting. Decorative only. */
.panel--marked::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 2.25rem;
  width: calc(100% + 20px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--c-accent) / .55) 12%,
    rgb(var(--c-accent) / .55) 88%,
    transparent
  );
  pointer-events: none;
}

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

/* A scaffold rule: a horizontal stroke crossing the full measure. */
.rule-scaffold {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    rgb(var(--c-accent) / .5),
    rgb(var(--c-mark) / .4) 45%,
    rgb(var(--c-signal) / .35) 70%,
    transparent
  );
}

/* The swoosh — the one curved gesture in an otherwise rectilinear layout.
   Used once per page at most. */
.swoosh {
  position: absolute;
  pointer-events: none;
  color: rgb(var(--c-mark) / .5);
}

/* ---------------------------------------------------------------------------
   Focus. Visible in both themes and against the accent itself.
   --------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: rgb(var(--c-mark) / .3);
  color: rgb(var(--c-ink));
}

/* ---------------------------------------------------------------------------
   Print — content only.
   What a page says, as plain black text: headings, prose, lists, tables and
   informative images, in reading order. None of the painting — no ground, no
   grain, no swoosh, 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, .swoosh, .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; }
}