@layer look {
/* A Glass (AD-078): the SOS Glass mock of 19 Oct 2026, improved. Frosted panels over our own wallpaper; text sits on
   heavy blur and tint so it meets WCAG AA (4.5:1 for text, checked in test/contrast_test.exs on the wallpaper's
   lightest and darkest colours); Approve uses the indigo accent and red is kept for destructive actions; the BOS mark is
   drawn in ink; Heroicons for controls, Fluent Emoji for objects; every number with a unit.
   Faces: Noto Sans, Geist Mono (Pavel's picks, AD-078). Motion: 200 ms, ease-out (cubic-bezier(0, 0, 0, 1); dur-open
   200 ms and ease-enter from HANDOFF-UI / os-values FM-013, EL-136). */
:root {
  /* design standard DS1: a Word file's own colours and highlights in Fusion (FQ23), the nearest readable hue each */
  --c-doc-hl-ink: #111; --c-doc-hl-ink-dark: #fff; --c-doc-red: #d0393e; --c-doc-orange: #c96a10; --c-doc-yellow: #a98400; --c-doc-green: #2e8f4a; --c-doc-cyan: #0f8ea0; --c-doc-blue: #3b6fe0; --c-doc-purple: #9150c8; --c-doc-hl-yellow: #fff176; --c-doc-hl-green: #a5e8a0; --c-doc-hl-cyan: #9eeaf2; --c-doc-hl-magenta: #f4a6ef; --c-doc-hl-blue: #a9c4ff; --c-doc-hl-red: #ffaaa5; --c-doc-hl-darkblue: #3b4f9c; --c-doc-hl-darkcyan: #1f7f86; --c-doc-hl-darkgreen: #2f7a3a; --c-doc-hl-darkmagenta: #8a3d86; --c-doc-hl-darkred: #9c3533; --c-doc-hl-darkyellow: #a59a2c; --c-doc-hl-darkgray: #7d7d7d; --c-doc-hl-lightgray: #d6d6d6; --c-doc-hl-black: #111;
  /* design standard 1.1, DS1 (r1-amendment-1.1 A): things that are themselves a colour, the same by day and night: the
     drawn page (its paper, edge, heading strokes, text lines and figure), a device's frame, and the black behind a
     full-screen picture. Here on :root, not on the look, because a full-screen page's body sits outside the look */
  --c-page: #fff; --c-page-edge: #d9dde3; --c-page-ink: #4b5563; --c-page-line: #c7ccd4; --c-page-fig: #dbe4f5;
  --c-bezel: #111418; --c-screen: #000;
  /* beyond 1.1, for Pavel to name (the design gate's last literals in app.css, 22 Oct 2026): the desk's selection box,
     see-through orange with a brighter edge (Pavel, 19 Oct), and a printed page's text (the print view, FQ25) */
  --c-sel-fill: rgb(255 106 31 / .38); --c-sel-line: rgb(255 122 54); --c-print-ink: #000;
  /* the cut text's tip keeps its own small shadow (PAPER 17:26: --sh-card changed its look), now named */
  --sh-tip: 0 4px 16px rgb(0 0 0 / .18);
  /* layers (DESIGN_C 3 Nov 2026, contract 3b): every z-index is one of these; same numbers as before, now named once */
  --z-under: -1;
  --z-base: 0;
  --z-part: 1;
  --z-part-2: 2;
  --z-pin: 3;
  --z-gate-switch: 3;
  --z-pin-pop: 4;
  --z-lift: 5;
  --z-lift-2: 6;
  --z-cover: 8;
  --z-win-front: 12;
  --z-more: 20;
  --z-notes-under: 29;
  --z-notes: 30;
  --z-shards: 34;
  --z-toast: 35;
  --z-round: 36;
  --z-menu-scrim: 38;
  --z-menu-under: 39;
  --z-menu: 40;
  --z-menu-top: 41;
  --z-drop: 44;
  --z-fav-drag: 45;
  --z-drop-live: 46;
  --z-skip: 50;
  --z-drag: 60;
  --z-mock: 90;
  --z-question: 8500;
  --z-welcome: 9000;
  --z-net: 9400;
  --z-tip: 9500;
  --z-ask: 9600;
  --z-float: 9650;
  --z-lock: 9700;
}

.look-a {
  --f-ui: "Noto Sans", system-ui, sans-serif; --f-display: "Noto Sans", system-ui, sans-serif; --f-mono: "Geist Mono", ui-monospace, monospace;
  --fs-1: 12px; --fs-2: 14px; --fs-3: 15px; --fs-4: 18px; --fs-5: 24px; --fs-6: 32px; --fs-7: 64px;
  --lh-tight: 1.3; --lh-body: 1.5; --w-text: 400; --w-strong: 600; --w-display: 600; --track-label: .06em;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --ctl: 38px; --row: 40px; --pad-win: 16px;
  --r-s: 8px; --r-m: 12px; --r-l: 20px; --r-pill: 999px;
  /* controls (DESIGN_LEAD's controls r0 CT1, proposed for standard 1.3): the small and large heights beside --ctl, the
     least touch size (accessibility r3's 48 px; Pavel's DLQ1: 44 or 48), a control's corner and its label's weight; the
     edge, hover wash, press shade, shine and shadow of a button, per look below (a wash over any fill: visible by night too) */
  --ctl-s: 32px; --ctl-l: 44px; --hit: 48px; --r-ctl: 10px; --w-ctl: 500;
  --c-ctl-edge: rgba(12, 18, 32, .14); --c-hover: rgba(12, 18, 32, .05); --c-press: rgba(12, 18, 32, .10); --c-ctl-shine: rgba(255, 255, 255, .16); --sh-ctl: 0 1px 2px rgba(18, 28, 60, .10);

  /* Light (design standard 1.2, DS1a): Semurg mist, a grey of its own with a touch of violet, never white; every text
     colour at AA on the window's thinnest glass (test/contrast_test.exs) */
  --c-floor: #cfcbd9; --c-ink: #0c1220; --c-ink-2: #384257; --c-ink-3: #454c5e; --c-line: rgba(12, 18, 32, .11);
  --c-surface: rgba(228, 226, 234, .80); --c-surface-2: rgba(216, 213, 224, .80); --c-raised: rgba(238, 237, 243, .88); --c-chosen: var(--c-surface);
  --c-face-solid: linear-gradient(var(--c-surface), var(--c-surface)) var(--c-floor); --c-face-solid-raised: linear-gradient(var(--c-raised), var(--c-raised)) var(--c-floor);
  --c-selected: rgba(47, 61, 166, .13);
  --c-accent: #2f3da6; --c-accent-ink: #ffffff; --c-accent-soft: rgba(47, 61, 166, .14);
  --c-danger: #9a1b1b; --c-danger-ink: #ffffff; --c-good: #11542a; --c-warn: #6e3c00; --c-focus: #2f3da6; --c-mark: rgba(255, 205, 40, .5);
  /* the ingestion window's stages (DESIGN_A's ingestion-window r0 section 2): one colour each, text on it at least 6:1; never a state colour */
  --ing-ink: #ffffff; --ing-receiving: #4f5d78; --ing-reading: #0b6a75; --ing-scanning: #7a5b00; --ing-listening: #a14a00; --ing-splitting: #8a2f66; --ing-finding: #1b5f8c; --ing-remembering: #5a2fa0;
  --c-brand: #ee332b; --c-brand-2: #f2665f; --c-brand-3: #f7a39e; --c-vault-ink: #e8eaf1; --c-vault-ink-2: #a9b0bf;
  --c-g-path: #2f3da6; --c-g-1: #384257; --c-g-2: #6c758a; --c-g-more: #6c758a; --c-halo: rgba(240, 243, 252, .9);
  --c-g-k-you: #2f3da6; --c-g-k-person: #1b5f8c; --c-g-k-company: #5a2fa0; --c-g-k-deal: #a14a00; --c-g-k-event: #2c6b2f; --c-g-k-email: #8a2f66; --c-g-k-folder: #7a5b00; --c-g-k-file: #4f5d78;

  --glass: blur(36px); --edge: rgba(238, 237, 243, .72); --edge-in: rgba(238, 237, 243, .85); --line: 1px;
  --c-hex-shade: rgba(18, 28, 60, .16); --sh-card: 0 6px 22px rgba(18, 28, 60, .10); --sh-win: 0 26px 70px rgba(18, 28, 60, .24); --sh-pop: 0 18px 44px rgba(18, 28, 60, .24);
  --dur: 200ms; --dur-slow: 300ms; --ease: cubic-bezier(0, 0, 0, 1); --bounce: cubic-bezier(.3, 1.6, .5, 1);
  --ic-stroke: 1.5; --ic-obj: 32px;
  --wall:
    radial-gradient(60% 55% at 12% 18%, #a8c3ff 0%, transparent 70%),
    radial-gradient(48% 60% at 85% 12%, #c6b5ff 0%, transparent 70%),
    radial-gradient(55% 50% at 70% 80%, #ffc2a8 0%, transparent 70%),
    radial-gradient(70% 70% at 30% 90%, #7fa6ff 0%, transparent 70%),
    linear-gradient(160deg, #9db8ff 0%, #b8a9ff 45%, #ffc0aa 80%, #9fc9ff 100%);
}
.look-a .card { --c-surface: rgba(228, 226, 234, .78); --c-face-solid: linear-gradient(var(--c-surface), var(--c-surface)) var(--c-floor); }

/* Bright (1.2): today's white look, kept for sunlight; only when chosen, never by Auto */
:root[data-theme="bright"] .look-a {
  --c-floor: #b9c8e8; --c-ink: #0c1220; --c-ink-2: #384257; --c-ink-3: #4a5266; --c-line: rgba(12, 18, 32, .11);
  --c-surface: rgba(255, 255, 255, .76); --c-surface-2: rgba(255, 255, 255, .58); --c-raised: rgba(255, 255, 255, .86); --c-chosen: var(--c-surface);
  --c-face-solid: linear-gradient(var(--c-surface), var(--c-surface)) var(--c-floor); --c-face-solid-raised: linear-gradient(var(--c-raised), var(--c-raised)) var(--c-floor);
  --c-selected: rgba(52, 67, 184, .13);
  --c-accent: #3443b8; --c-accent-ink: #ffffff; --c-accent-soft: rgba(52, 67, 184, .14);
  --c-danger: #9a1b1b; --c-danger-ink: #ffffff; --c-good: #11542a; --c-warn: #6e3c00; --c-focus: #3443b8;
  /* the ingestion window's stages (DESIGN_A's ingestion-window r0 section 2): one colour each, text on it at least 6:1; never a state colour */
  --ing-ink: #ffffff; --ing-receiving: #4f5d78; --ing-reading: #0b6a75; --ing-scanning: #7a5b00; --ing-listening: #a14a00; --ing-splitting: #8a2f66; --ing-finding: #1b5f8c; --ing-remembering: #5a2fa0;
  --c-g-path: #3443b8; --edge: rgba(255, 255, 255, .72); --edge-in: rgba(255, 255, 255, .85);
}
:root[data-theme="bright"] .look-a .card { --c-surface: rgba(255, 255, 255, .78); --c-face-solid: linear-gradient(var(--c-surface), var(--c-surface)) var(--c-floor); }

/* night */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="bright"]) .look-a {
  --c-floor: #0d1430; --c-ink: #eef1f8; --c-ink-2: #b8c0d2; --c-ink-3: #a3abbf; --c-line: rgba(255, 255, 255, .11);
  --c-surface: rgba(20, 25, 40, .74); --c-surface-2: rgba(28, 34, 52, .62); --c-raised: rgba(44, 52, 76, .8); --c-chosen: rgba(255, 255, 255, .14); --c-selected: rgba(165, 173, 255, .2);
  --c-face-solid: linear-gradient(var(--c-surface), var(--c-surface)) var(--c-floor); --c-face-solid-raised: linear-gradient(var(--c-raised), var(--c-raised)) var(--c-floor);
  --c-accent: #a5adff; --c-accent-ink: #0b1020; --c-accent-soft: rgba(165, 173, 255, .2);
  --c-danger: #ff8f8f; --c-danger-ink: #1a0606; --c-good: #5ad184; --c-warn: #f2b84b; --c-focus: #a5adff; --c-mark: rgba(250, 204, 21, .35);
  /* the ingestion window's stages (r0 section 2), dark */
  --ing-ink: #0b1020; --ing-receiving: #aab4cc; --ing-reading: #4cc9d6; --ing-scanning: #e8d84a; --ing-listening: #f2a93b; --ing-splitting: #e69ac6; --ing-finding: #6fb4f0; --ing-remembering: #b79cf2;
  --c-g-path: #a5adff; --c-g-1: #b8c0d2; --c-g-2: #8a93a8; --c-g-more: #8a93a8; --c-halo: rgba(22, 27, 44, .9);
  --c-g-k-you: #a5adff; --c-g-k-person: #7ec3f0; --c-g-k-company: #c3a6ff; --c-g-k-deal: #ffb070; --c-g-k-event: #8fd694; --c-g-k-email: #ff9fd0; --c-g-k-folder: #e6c25a; --c-g-k-file: #b8c0d2;
  --edge: rgba(255, 255, 255, .14); --edge-in: rgba(255, 255, 255, .08);
  --c-hex-shade: rgba(0, 0, 0, .4); --sh-card: 0 6px 22px rgba(0, 0, 0, .35); --sh-win: 0 26px 70px rgba(0, 0, 0, .55); --sh-pop: 0 18px 44px rgba(0, 0, 0, .55);
  --c-ctl-edge: rgba(255, 255, 255, .14); --c-hover: rgba(255, 255, 255, .06); --c-press: rgba(255, 255, 255, .12); --c-ctl-shine: rgba(255, 255, 255, .10); --sh-ctl: 0 1px 2px rgba(0, 0, 0, .40);
  --wall:
    radial-gradient(60% 55% at 12% 18%, #26408f 0%, transparent 70%),
    radial-gradient(48% 60% at 85% 12%, #4a2f8c 0%, transparent 70%),
    radial-gradient(55% 50% at 70% 80%, #7a3456 0%, transparent 70%),
    radial-gradient(70% 70% at 30% 90%, #13306e 0%, transparent 70%),
    linear-gradient(160deg, #13224f 0%, #2a1e58 45%, #47213d 80%, #102c55 100%);
} :root:not([data-theme="light"]):not([data-theme="bright"]) .look-a .card { --c-surface: rgba(20, 25, 40, .76); --c-face-solid: linear-gradient(var(--c-surface), var(--c-surface)) var(--c-floor); } }
:root[data-theme="dark"] .look-a {
  --c-floor: #0d1430; --c-ink: #eef1f8; --c-ink-2: #b8c0d2; --c-ink-3: #a3abbf; --c-line: rgba(255, 255, 255, .11);
  --c-surface: rgba(20, 25, 40, .74); --c-surface-2: rgba(28, 34, 52, .62); --c-raised: rgba(44, 52, 76, .8); --c-chosen: rgba(255, 255, 255, .14); --c-selected: rgba(165, 173, 255, .2);
  --c-face-solid: linear-gradient(var(--c-surface), var(--c-surface)) var(--c-floor); --c-face-solid-raised: linear-gradient(var(--c-raised), var(--c-raised)) var(--c-floor);
  --c-accent: #a5adff; --c-accent-ink: #0b1020; --c-accent-soft: rgba(165, 173, 255, .2);
  --c-danger: #ff8f8f; --c-danger-ink: #1a0606; --c-good: #5ad184; --c-warn: #f2b84b; --c-focus: #a5adff; --c-mark: rgba(250, 204, 21, .35);
  /* the ingestion window's stages (r0 section 2), dark */
  --ing-ink: #0b1020; --ing-receiving: #aab4cc; --ing-reading: #4cc9d6; --ing-scanning: #e8d84a; --ing-listening: #f2a93b; --ing-splitting: #e69ac6; --ing-finding: #6fb4f0; --ing-remembering: #b79cf2;
  --c-g-path: #a5adff; --c-g-1: #b8c0d2; --c-g-2: #8a93a8; --c-g-more: #8a93a8; --c-halo: rgba(22, 27, 44, .9);
  --c-g-k-you: #a5adff; --c-g-k-person: #7ec3f0; --c-g-k-company: #c3a6ff; --c-g-k-deal: #ffb070; --c-g-k-event: #8fd694; --c-g-k-email: #ff9fd0; --c-g-k-folder: #e6c25a; --c-g-k-file: #b8c0d2;
  --edge: rgba(255, 255, 255, .14); --edge-in: rgba(255, 255, 255, .08);
  --c-hex-shade: rgba(0, 0, 0, .4); --sh-card: 0 6px 22px rgba(0, 0, 0, .35); --sh-win: 0 26px 70px rgba(0, 0, 0, .55); --sh-pop: 0 18px 44px rgba(0, 0, 0, .55);
  --c-ctl-edge: rgba(255, 255, 255, .14); --c-hover: rgba(255, 255, 255, .06); --c-press: rgba(255, 255, 255, .12); --c-ctl-shine: rgba(255, 255, 255, .10); --sh-ctl: 0 1px 2px rgba(0, 0, 0, .40);
  --wall:
    radial-gradient(60% 55% at 12% 18%, #26408f 0%, transparent 70%),
    radial-gradient(48% 60% at 85% 12%, #4a2f8c 0%, transparent 70%),
    radial-gradient(55% 50% at 70% 80%, #7a3456 0%, transparent 70%),
    radial-gradient(70% 70% at 30% 90%, #13306e 0%, transparent 70%),
    linear-gradient(160deg, #13224f 0%, #2a1e58 45%, #47213d 80%, #102c55 100%);
}
:root[data-theme="dark"] .look-a .card { --c-surface: rgba(20, 25, 40, .76); --c-face-solid: linear-gradient(var(--c-surface), var(--c-surface)) var(--c-floor); }

/* A's layout: the defaults in core.css (floating windows, centred dock, widgets on the left, places on the right). The
   widget picker is not on the desktop: it opens from the dock on demand (the steer). */
/* the desk clock as the sign-in clock: the theme's ink with a halo in the floor's tone (each wallpaper has a light and a dark
   picture that follows the theme); white read faint over the light walls (DESIGN_LEAD, 4 Nov 2026) */
.look-a .w-clock { color: var(--c-ink); text-shadow: 0 1px 14px var(--c-floor); }
.look-a .w-clock .w-date { color: var(--c-ink); }
.look-a .place { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.look-a .place :is(.ic-fluent, .ic-glass) { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); }
/* the sign-in clock and date in the theme's own ink, with a halo of the floor's tone: white read 1.8:1 over the light Ribbons
   wall (DESIGN_LEAD, 4 Nov 2026, demo.semurg.org first page); dark keeps near-white ink on the dark wall */
.look-a .gate-time, .look-a .gate-date { color: var(--c-ink); text-shadow: 0 1px 14px var(--c-floor); }
}

/* the glass icons' own colours at night (design standard DSQ4, AD-104: colours only from tokens): their sprite sits
   outside the frame, so its gradients read these from the page's root, not the look's: the shade under and inside an
   icon, and the ink drawn on it */
@layer look {
:root { --c-ic-shade: #000000; --c-ic-ink: #cbd5e1; }
}

/* Fusion's desk under a Word page (PAPER_FUSION, 2 Nov 2026; DESIGN_A's look spec): the desk is the theme's (light grey; dark grey under Dark), the sheet's
   shadow is a soft lift, and a printed page is black words on white whatever the theme. */
:root { --pg-desk: #dfe1e6; --pg-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 28px rgba(0, 0, 0, .16); --pg-print-bg: #ffffff; --pg-print-ink: #000000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="bright"]) { --pg-desk: #202226; } }
:root[data-theme="dark"] { --pg-desk: #202226; }

/* Fusion's paper (Pavel, 2 Nov 2026: "editing Word and Excel on a black page is not what people are used to"; DESIGN_A's look spec, part 2): the page
   behind a Word or spreadsheet view is White, Grey or Black by the person's own choice, whatever the theme; with no choice (paper-auto) White,
   and Black under the Dark look. The --pg-* colours are DESIGN_A's. The file's own colours reach the page as eight named hues (--c-doc-*): each
   paper has its own value of each, the same hue brought to 4.5:1 on that page (test/sos1_web/fusion_paper_test.exs measures every pair). */
@layer look {
.pg-white, .pg-auto {
  color-scheme: light;
  --pg-bg: #ffffff; --pg-ink: #1b1d21; --pg-ink-2: #4b5058; --pg-link: #1a4fd0; --pg-edge: rgba(0, 0, 0, .18);
  --pg-danger: #9a1b1b; --pg-good: #11542a; --pg-warn: #6e3c00; --pg-mark: rgba(255, 205, 40, .5);
  --pg-red: #d0393e; --pg-orange: #ad5b0e; --pg-yellow: #8a6c00; --pg-green: #2a8344; --pg-cyan: #0d7d8d; --pg-blue: #376cdf; --pg-purple: #9150c8;
}
.pg-grey {
  color-scheme: light;
  --pg-bg: #d7d9de; --pg-ink: #14161a; --pg-ink-2: #3d4249; --pg-link: #123fa8; --pg-edge: rgba(0, 0, 0, .18);
  --pg-danger: #8f1717; --pg-good: #0f4d26; --pg-warn: #5e3300; --pg-mark: rgba(255, 205, 40, .6);
  --pg-red: #ad292d; --pg-orange: #8c4a0b; --pg-yellow: #715800; --pg-green: #226836; --pg-cyan: #0b6571; --pg-blue: #1f53c4; --pg-purple: #7d39b6;
}
.pg-black {
  color-scheme: dark;
  --pg-bg: #000000; --pg-ink: #ececec; --pg-ink-2: #b4b8c0; --pg-link: #8ab4ff; --pg-edge: rgba(255, 255, 255, .28);
  --pg-table-line: var(--pg-edge);
  --pg-danger: #ff8f8f; --pg-good: #5ad184; --pg-warn: #f2b84b; --pg-mark: rgba(250, 204, 21, .35);
  --pg-red: #d3454a; --pg-orange: #c96a10; --pg-yellow: #a98400; --pg-green: #2e8f4a; --pg-cyan: #0f8ea0; --pg-blue: #3f72e1; --pg-purple: #985ccc;
}
:root[data-theme="dark"] .pg-auto {
  color-scheme: dark;
  --pg-bg: #000000; --pg-ink: #ececec; --pg-ink-2: #b4b8c0; --pg-link: #8ab4ff; --pg-edge: rgba(255, 255, 255, .28);
  --pg-table-line: var(--pg-edge);
  --pg-danger: #ff8f8f; --pg-good: #5ad184; --pg-warn: #f2b84b; --pg-mark: rgba(250, 204, 21, .35);
  --pg-red: #d3454a; --pg-orange: #c96a10; --pg-yellow: #a98400; --pg-green: #2e8f4a; --pg-cyan: #0f8ea0; --pg-blue: #3f72e1; --pg-purple: #985ccc;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="bright"]) .pg-auto {
  color-scheme: dark;
  --pg-bg: #000000; --pg-ink: #ececec; --pg-ink-2: #b4b8c0; --pg-link: #8ab4ff; --pg-edge: rgba(255, 255, 255, .28);
  --pg-table-line: var(--pg-edge);
  --pg-danger: #ff8f8f; --pg-good: #5ad184; --pg-warn: #f2b84b; --pg-mark: rgba(250, 204, 21, .35);
  --pg-red: #d3454a; --pg-orange: #c96a10; --pg-yellow: #a98400; --pg-green: #2e8f4a; --pg-cyan: #0f8ea0; --pg-blue: #3f72e1; --pg-purple: #985ccc;
} }
.pg {
  --c-ink: var(--pg-ink); --c-ink-2: var(--pg-ink-2); --c-ink-3: var(--pg-ink-2); --c-line: var(--pg-edge); --c-accent: var(--pg-link); --c-focus: var(--pg-link);
  --c-accent-soft: color-mix(in srgb, var(--pg-link) 16%, var(--pg-bg));
  --c-danger: var(--pg-danger); --c-good: var(--pg-good); --c-warn: var(--pg-warn); --c-mark: var(--pg-mark);
  --c-surface: color-mix(in srgb, var(--pg-ink) 5%, var(--pg-bg)); --c-surface-2: color-mix(in srgb, var(--pg-ink) 8%, var(--pg-bg)); --c-raised: color-mix(in srgb, var(--pg-ink) 3%, var(--pg-bg));
  --c-doc-red: var(--pg-red); --c-doc-orange: var(--pg-orange); --c-doc-yellow: var(--pg-yellow); --c-doc-green: var(--pg-green);
  --c-doc-cyan: var(--pg-cyan); --c-doc-blue: var(--pg-blue); --c-doc-purple: var(--pg-purple);
}
}