/* Shared paper skin for the static site and Phoenix console.
 * Site.Assets publishes this same file under /site/; the server serves /assets/.
 * Each layout supplies its own --paper-mark asset URL.
 */

/* ── Light: ink on paper ──────────────────────────────────────────────── */

[data-skin="paper"] {
  /* Brand and accent are one colour here. A page with a single ink and a
     single accent cannot say "this is clickable" twice in two hues. */
  --color-brand:       #553196;
  --color-brand-hover: #412475;
  --color-brand-text:  #fbfafd;

  --color-accent:      #553196;
  --color-accent-soft: #e9e0f8;
  --color-accent-line: #bda9e4;
  --color-accent-ink:  #412475;

  --color-focus-ring:  #553196;

  /* Surfaces. The stock carries the accent's cast — a few per cent of
     violet through every neutral, so the page reads as one paper rather than
     a warm sheet with a cool ink on it. bg-1 is the *brighter* sheet, so a
     card sits on top of the page rather than being cut into it. */
  --color-bg-0: #f4f1f8;
  --color-bg-1: #f9f7fc;
  --color-bg-2: #eae5f1;
  --color-bg-3: #dbd4e6;

  --color-border:        #e3ddec;
  --color-border-strong: #b3abc2;

  --color-text-primary:   #1c1620;
  --color-text-secondary: #5b5266;
  --color-text-muted:     #8b8496;

  --color-band: #e9e4f1;

  /* Code is a printed listing: ink on a deeper sheet, not a black rectangle.
     `--color-code-text` is read both by the inline chips and by the setup
     panels, so it has to be the dark of the two. */
  /* The one status colour any of these pages uses: the note on /self-hosted
     that names what to pick before running the six commands. Blue on a page
     with one accent is a second accent, so it becomes the accent. The other
     three status scales are untouched, because no page under this skin
     renders one. */
  --color-info:      #553196;
  --color-info-bg:   #ece4f8;
  --color-info-text: #412475;

  --color-code-bg:   #e6e0f0;
  --color-code-text: #1c1620;

  /* The ink scale, which is where the skin does its real work. ink-0 is the
     band a section is printed on and ink-1 is the panel inset into it. */
  --color-ink-0:         #efeaf6;
  --color-ink-1:         #e6e0f0;
  --color-ink-2:         #dcd4ea;
  --color-ink-border:    #c3b9d8;
  --color-ink-text:      #1c1620;
  --color-ink-secondary: #5b5266;
  --color-ink-brand:     #553196;

  --paper-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* The mark is one of the brand files: `Site.Layouts.root/1` sets this
     property on <html> from `Site.Brand.asset/1`. The value here is the same
     path, so the skin still renders if that ever stops being set. */
  --paper-mark: url("/site/images/brand/mark-mono.png");
  --paper-mark-filter: none;
}

/* ── Dark: the same press run at night ────────────────────────────────── */

[data-theme="dark"][data-skin="paper"] {
  --color-brand:       #a98ce4;
  --color-brand-hover: #8a6bd0;
  --color-brand-text:  #131019;

  --color-accent:      #a98ce4;
  --color-accent-soft: #1e1830;
  --color-accent-line: #3b3159;
  --color-accent-ink:  #c4aef0;

  --color-focus-ring:  #a98ce4;

  --color-bg-0: #131019;
  --color-bg-1: #1a1723;
  --color-bg-2: #221d2e;
  --color-bg-3: #2d2740;

  --color-border:        #2a2438;
  --color-border-strong: #453c5c;

  --color-text-primary:   #eae6f2;
  --color-text-secondary: #aaa3bd;
  --color-text-muted:     #7d768f;

  --color-band: #17131f;

  --color-info:      #a98ce4;
  --color-info-bg:   #241c38;
  --color-info-text: #c4aef0;

  --color-code-bg:   #1e1a29;
  --color-code-text: #eae6f2;

  --color-ink-0:         #191522;
  --color-ink-1:         #221d2e;
  --color-ink-2:         #2c253c;
  --color-ink-border:    #362f47;
  --color-ink-text:      #eae6f2;
  --color-ink-secondary: #aaa3bd;
  --color-ink-brand:     #a98ce4;

  /* The mark is a dark drawing on a transparent ground, so at night it is
     inverted rather than replaced by a second file that would have to be kept
     in step. */
  --paper-mark-filter: invert(1);
}

/* ── No inverted block ────────────────────────────────────────────────── */

/* The closer was a black slab here for one draft, on the argument that a
   printed page ends on the back of the card. It does not: nothing else on
   this page is a filled dark rectangle, so the one that was read as a
   different site arriving at the bottom. It now sits on the same deeper
   sheet the setup and price sections use, with the hairline above it doing
   the separating. Its button is the brand, like every other primary action.

   `--color-ink-brand` is what that button reads, and in the paper scale it
   is already the accent, so there is nothing to declare here. This comment
   is the whole change: the section is on the ground with everything else. */

/* ── Print, not product ───────────────────────────────────────────────── */

/* Corners. Print has none: a rule is a rule and a panel is a rectangle. The
   pills keep their radius, because a stamped numeral and a chip are round on
   paper too. The attribute selector outranks the utility it overrides. */
[data-skin="paper"] .rounded,
[data-skin="paper"] .rounded-md,
[data-skin="paper"] .rounded-lg,
[data-skin="paper"] .rounded-xl,
[data-skin="paper"] .rounded-2xl {
  border-radius: 2px;
}

/* Nothing on a page is lifted off it. */
[data-skin="paper"] .shadow-sm,
[data-skin="paper"] .shadow,
[data-skin="paper"] .shadow-lg {
  box-shadow: none;
}

/* Headings are set, not shipped. The stack is the system serif — New York on
   Apple, Georgia elsewhere — because the site's CSP serves fonts from 'self'
   only and no face is worth a download for a skin. */
[data-skin="paper"] h1,
[data-skin="paper"] h2,
[data-skin="paper"] h3,
[data-skin="paper"] [data-role="figure"] {
  font-family: var(--paper-display);
  letter-spacing: -0.015em;
}

/* A serif at 700 in a 60px line is a masthead. Down one step, and the size
   carries the weight instead. */
[data-skin="paper"] h1 {
  font-weight: 600;
}

/* The measured numbers — the case study's four and the price cards' three —
   are the page's largest type after the headline, and old-style figures in a
   serif are what a printed table of them looks like. */
[data-skin="paper"] [data-role="figure"] {
  font-variant-numeric: oldstyle-nums;
  font-weight: 600;
}

/* Grain. A fixed overlay rather than a background, so it does not tile
   differently on every section, and multiplied so it darkens the stock
   instead of fogging the type. `feTurbulence` keeps it to one data URI, which
   `img-src 'self' data:` already permits. */
[data-skin="paper"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.16;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="dark"][data-skin="paper"] body::after {
  mix-blend-mode: screen;
  opacity: 0.07;
}

/* The mark. The default app icon is a colour tile, and a page with one ink
   cannot hold a second palette, so `content` swaps in the brand's mono
   drawing without the layout or a diagram having to know which skin is on.
   Every displayed brand mark carries the same hook: the chrome and product
   diagrams therefore cannot quietly choose different marks. `width: auto`
   keeps the drawing's proportions inside the square box the utility class
   gives it. */
[data-skin="paper"] img[data-role="brand-mark"] {
  content: var(--paper-mark);
  width: auto;
  filter: var(--paper-mark-filter);
}

/* Letterhead: the same drawing, once, very faint, behind the opening lines. */
[data-skin="paper"] [data-role="hero"] {
  position: relative;
  isolation: isolate;
}

[data-skin="paper"] [data-role="hero"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1rem;
  left: 50%;
  width: 24rem;
  height: 24rem;
  transform: translateX(-50%);
  background: var(--paper-mark) center / contain no-repeat;
  opacity: 0.035;
  filter: var(--paper-mark-filter);
  pointer-events: none;
}

/* The masthead rule. The layout draws one hairline under the header; this is
   the second one, three pixels below it, and it is the whole difference
   between a web header and the top of a page. */
[data-skin="paper"] header {
  box-shadow: 0 3px 0 -2px var(--color-border);
}

/* The app glyphs are colour emoji, and a page set in one ink and one accent
   cannot hold twelve of them: greying them only made them grey emoji, which
   is a sticker with the colour turned off. They are decorative — every one
   is `aria-hidden` beside the name it illustrates — so on paper the names
   carry the section on their own.

   Hung off a hook the templates carry rather than off `[aria-hidden]`, which
   is also the eyebrow's accent rule and the setup connector. Every place a
   glyph is rendered has one; `paper_skin_test.exs` counts them. */
[data-skin="paper"] [data-role="glyph"] {
  display: none;
}

/* `text-white` is a literal on every primary button on the site, and it is
   correct against the light theme's brand. At night the paper brand is a
   light lavender, where white is a label you have to look for.
   `--color-brand-text` is the token that already knows which way round it
   goes, so the skin points the utility at it — guarded by the fill, so a
   white label on anything else is left alone. */
[data-skin="paper"] [class*="bg-[var(--color-brand)]"].text-white,
[data-skin="paper"] .bg-brand.text-white {
  color: var(--color-brand-text);
}