/* 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;

  --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;

    --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;

  --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));
}