/* paper-maba.css — OCTYN Paper reskin for the MABA workflow-concept diagrams.
   Loaded after the page's own inline <style> (archify export) so these rules win
   the cascade at equal specificity. Only custom-property values and the few
   literal (non-variable) colors are touched — no selectors are added that would
   change layout, structure or JS behaviour. Tokens copied verbatim from
   octyn-site/src/components/paper/paper.css. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Chivo+Mono:wght@300..600&display=swap");

:root {
  --paper-bg: #E8E3D9;
  --paper-surface: #EFEBE3;
  --paper-ink: #28251F;
  --paper-body: #3F3B34;
  --paper-mute: #655F55;
  --paper-line: #BDB6A8;
  --paper-hair: rgba(40, 37, 31, .16);
  --paper-red: #c8402a;
  --paper-red-ink: #a93520;
  --paper-on-red: #fffdf8;
}

/* ===== archify theme/preset tokens -> Paper (same selectors, same specificity,
   later in source order so they win over the inline <style> above them) ===== */
:root,
[data-theme="dark"],
[data-theme="light"],
[data-preset="signal-flow"][data-theme="dark"],
[data-preset="signal-flow"][data-theme="light"],
[data-preset="blueprint"][data-theme="dark"],
[data-preset="blueprint"][data-theme="light"],
[data-preset="editorial"][data-theme="dark"],
[data-preset="editorial"][data-theme="light"] {
  --bg: #E8E3D9;
  --grid: rgba(40, 37, 31, .10);
  --text: #28251F;
  --text-muted: #655F55;
  --text-dim: #8c8575;
  --text-faint: #a79f8d;

  --panel: #EFEBE3;
  --panel-border: #BDB6A8;
  --lane-fill: rgba(40, 37, 31, .035);
  --lane-stroke: #BDB6A8;

  --arrow: #655F55;
  --arrow-emphasis: #28251F;

  --mask: #EFEBE3;

  /* Category colour -> ink/mute, differentiated by weight/fill/dash below,
     never by hue. These feed every c-*, t-*, a-*, m-* class and the
     overview-map / semantic-lens legends via color-mix(). */
  --frontend-fill:    rgba(40, 37, 31, .05);
  --frontend-stroke:  #28251F;
  --backend-fill:     rgba(40, 37, 31, .09);
  --backend-stroke:   #28251F;
  --database-fill:    rgba(40, 37, 31, .13);
  --database-stroke:  #28251F;
  --cloud-fill:       rgba(101, 95, 85, .07);
  --cloud-stroke:     #655F55;
  --security-fill:    rgba(40, 37, 31, .04);
  --security-stroke:  #28251F;
  --messagebus-fill:  rgba(101, 95, 85, .10);
  --messagebus-stroke:#655F55;
  --external-fill:    rgba(101, 95, 85, .05);
  --external-stroke:  #655F55;

  --toolbar-bg:       rgba(239, 235, 227, .92);
  --toolbar-border:   #BDB6A8;
  --toolbar-text:     #28251F;
  --toolbar-hover:    rgba(189, 182, 168, .30);
  --toolbar-menu-bg:  #EFEBE3;
}

/* Print: Paper ground, no grain, same non-hue category colours (brief section 8). */
@media print {
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg: #E8E3D9;
    --grid: transparent;
    --panel: #EFEBE3;
    --panel-border: #BDB6A8;
    --text: #28251F;
    --text-muted: #655F55;
    --text-dim: #8c8575;
    --text-faint: #a79f8d;
    --mask: #EFEBE3;
    --lane-fill: rgba(40, 37, 31, .035);
    --lane-stroke: #BDB6A8;
    --arrow: #655F55;
    --arrow-emphasis: #28251F;
    --frontend-fill:    rgba(40, 37, 31, .05);
    --frontend-stroke:  #28251F;
    --backend-fill:     rgba(40, 37, 31, .09);
    --backend-stroke:   #28251F;
    --database-fill:    rgba(40, 37, 31, .13);
    --database-stroke:  #28251F;
    --cloud-fill:       rgba(101, 95, 85, .07);
    --cloud-stroke:     #655F55;
    --security-fill:    rgba(40, 37, 31, .04);
    --security-stroke:  #28251F;
    --messagebus-fill:  rgba(101, 95, 85, .10);
    --messagebus-stroke:#655F55;
    --external-fill:    rgba(101, 95, 85, .05);
    --external-stroke:  #655F55;
  }
}

/* Paper grain, screen only (brief 1) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  opacity: .06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::before { display: none; } }

/* Signal Flow's glow blobs are literal hues, not variables: neutralise them
   so switching visual style from the toolbar never reintroduces colour. */
html[data-preset="signal-flow"] body { background-image: none; }

/* Type (brief 3): Chivo Mono for the tool's labels/UI, Archivo for headings. */
body {
  font-family: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
h1, .card h3 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 780;
}
html[data-preset="editorial"] h1,
html[data-preset="editorial"] .card h3 {
  font-family: "Archivo", system-ui, sans-serif;
}

/* One literal (non-variable) hue left in the base stylesheet. */
.c-region { fill: rgba(40, 37, 31, .05); }

/* Non-hue differentiation for the category classes (brief: weight, fill vs
   outline, dashed — never colour). Dash/weight choices echo the drawing
   register: a dashed box reads as a boundary/gate, a fine dash-dot as a
   queue/feedback path, external actors stay lightest/recede. */
.c-frontend   { stroke-width: 1.5; }
.c-backend    { stroke-width: 2; }
.c-database   { stroke-width: 1.5; }
.c-cloud      { stroke-width: 1.3; stroke-dasharray: 3,2; }
.c-security   { stroke-width: 1.5; stroke-dasharray: 2,2; }
.c-messagebus { stroke-width: 1.3; stroke-dasharray: 1,2; }
.c-external   { stroke-width: 1; opacity: .88; }

/* The reader's own position: selection, the one red accent used globally and
   never as a diagram/status colour (brief section 2, "selection and focus states"). */
::selection { background: var(--paper-red); color: var(--paper-on-red); }

/* Running text under the diagram reads in Archivo; mono stays on labels. */
.card ul, .card ol, .card li, .card p { font-family: "Archivo", system-ui, sans-serif; }
/* The fixed workflow nav sat over the page title: give the title room. */
html:not([data-present="true"]) .container > .header { margin-top: 3.6rem; }
@media (max-width: 560px) { html:not([data-present="true"]) .container > .header { margin-top: 2.8rem; } }