@bongos/core 1.19.726 → 1.19.727

package/docs/design/mocks/world/natgeo-editorial/_tokens.css

@@ -1,377 +0,0 @@
-/* Cloud Bongos world candidate: natgeo-editorial, "The expedition".
-   World: a dark editorial expedition journal. A neutral near black page (sampled #0c0c0c to
-   #101010 off the owner's template), a printed halftone screen laid over ground AND photograph
-   alike, a hairline frame instead of a grid, very large bold neo grotesque headlines in white,
-   small neutral grey secondary text set in narrow columns.
-   Palette strategy: RESTRAINED. Neutrals carry every surface; one lamp yellow (#ffd214, sampled
-   from the template's mark and its round button) lights only the mark frame, the primary door,
-   the current item and the live step. Nothing else is coloured, callouts included.
-   Faces: Archivo 300/400/500/600/700, the closest obtainable neo grotesque to the template's
-   Helvetica-class headline lettering (Hanken Grotesk stays in the stack for pages that load it);
-   JetBrains Mono 400 for the light hall's labels. Figures tabular.
-   Materials: near black ground + halftone screen + hairline frame; r2-planet-limb bleeding past
-   the hero as a lit limb (lighten on dark, an inverted engraving multiplied on paper); the
-   rendered bongo pair as the specimen plate below it; forest-mist under the dark hall's glass.
-   Light mode is paper, not an inversion: warm off white, ink hairlines, photographs only as
-   printed negatives.
-   Corners: pill for buttons, discs and inputs; 0 for every container. The dark hall's floating
-   glass shell is the one rounded object (an object over a photograph, not a container).
-   Derived from the contract: everything under DERIVED. --accent/--accent-deep/--sea/--terracotta
-   are set once in :root and are never re-pinned inside a dark block. */
-
-:root {
-  /* ---- CONTRACT (a host instance overrides exactly these) ---- */
-  --bg: #f4f3ef;
-  --bg-card: #ffffff;
-  --bg-deep: #e9e7e0;
-  --bg-frame: #eceae3;
-  --ink: #141412;
-  --ink-soft: #55544f;
-  --ink-faint: #6f6d64;
-  --rule: #d9d7cf;
-  --rule-soft: #e8e6df;
-  --accent: #ffd214;
-  --accent-deep: #7f6209;
-  --sea: #2c5464;
-  --terracotta: #b4592f;
-  --font-display: 'Archivo', 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --font-body: 'Archivo', 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-  /* ---- DERIVED ---- */
-  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  /* labels and hall navigation take the mono face on paper; the dark hall keeps the grotesque */
-  --font-label: var(--font-mono);
-
-  --line: 1px;
-  --radius: 0;
-  --radius-sm: 0;
-  --radius-pill: 999px;
-  --shell-radius: 0;
-  --shell-inset: 20px;
-
-  /* accent jobs. --mark-bg is the mark's frame colour; the drums inside it are ink, never
-     accent, so the whole mark reads as one yellow rectangle with a specimen in it. */
-  --mark-bg: var(--accent);
-  --accent-text: var(--accent-deep);     /* the accent wherever it carries words */
-  --ink-on-accent: #171200;              /* words that sit on the accent */
-  --accent-tint: rgba(255, 210, 20, .18);
-  --accent-tint-soft: rgba(255, 210, 20, .10);
-  --accent-track: #dedbd0;
-
-  /* page materials */
-  --grid-line: rgba(20, 20, 18, .10);
-  --dots: rgba(20, 20, 18, .085);
-  --dot-r: .9px;
-  --dot-pitch: 5px;
-  --plate: none;                          /* the hall's ground photograph */
-  --plate-filter: none;
-  --plate-scrim: transparent;
-  --hatch: repeating-linear-gradient(45deg, rgba(255,210,20,.34) 0 5px, transparent 5px 11px);
-  --hatch-bg: #fffbe6;
-  --band-hatch: repeating-linear-gradient(45deg, rgba(20,20,18,.045) 0 1px, transparent 1px 6px);
-
-  /* the planet: kept for pages that draw it as a disc */
-  --planet-plate: url("../../../../../.impeccable/mocks/world-assets/natgeo-planet.jpg");
-  --planet-plate-op: 0;                   /* paper carries no photograph */
-  --planet-filter: none;
-  --planet-body: #eceae2;
-  --planet-rim: rgba(40, 38, 32, .26);
-  --planet-glow: transparent;
-  --planet-lift: rgba(40, 38, 32, .10);
-  --planet-halo: rgba(120, 116, 100, .16);
-
-  /* the round-2 limb bleeding past the hero, and the rendered specimen below it.
-     On paper both are printed as inverted engravings and multiplied into the sheet. */
-  --limb-plate: url("../../../../../.impeccable/mocks/world-assets/r2-planet-limb.jpg");
-  --limb-blend: multiply;
-  --limb-filter: invert(1) grayscale(1) contrast(1.04) brightness(1.02);
-  --limb-op: .34;
-  --bongo-plate: url("../../../../../.impeccable/mocks/world-assets/r2-bongos-natgeo-a.jpg");
-  --bongo-blend: multiply;
-  --bongo-filter: invert(1) grayscale(1) contrast(1.14) brightness(.98);
-  --bongo-op: .72;
-
-  /* the hall's glass shell */
-  --glass: var(--bg);
-  --glass-edge: var(--rule);
-  --glass-blur: 0px;
-  --glass-dim: 1;                         /* how far the shell darkens what it sits on */
-  --glass-shadow: 0 1px 0 rgba(20, 20, 18, .035);
-
-  /* the hall's surfaces */
-  --side-fill: var(--bg-card);
-  --topbar-fill: var(--bg-card);
-  --head-fill: var(--bg-deep);
-  --row-hover: rgba(20, 20, 18, .035);
-  --panel: var(--bg-card);
-  --panel-edge: var(--rule);
-  --field: #ffffff;
-  --check-edge: #b6b3a8;
-  --primary-fill: var(--ink);
-  --primary-ink: var(--bg);
-  --nav-case: uppercase;
-  --cur-fill: var(--accent-tint);
-  --cur-ink: var(--ink);
-  --cur-mark: var(--accent-deep);
-  --cur-dot: var(--accent);
-  --cur-dot-size: 6px;
-  --chip-fill: transparent;
-  --chip-ink: var(--ink-soft);
-  --chip-edge: var(--rule);
-  /* the hero's narrow column sits over the lit limb, so it carries its own ink */
-  --lede-ink: #3f3e39;
-
-  /* the ledger's world map */
-  --map-land: #d2cdbd;
-  --map-edge: #cdc8b8;
-
-  /* the inherited bongo mark, drawn in ink inside the yellow frame */
-  --mark-drum: #1b1a17;
-  --mark-drum-deep: #000000;
-  --mark-drum-2: #2c2a26;
-  --mark-skin-hi: #d9d5c9;
-  --mark-skin-mid: #b3ad9d;
-  --mark-skin-lo: #7c7667;
-  --skin-hi: #f7f0e0;
-  --skin-mid: #e3d4b6;
-  --skin-lo: #b89d74;
-  --drum-shadow: #141412;
-
-  /* state */
-  --ok: #3d7a4b;
-  --warn: #7f6209;
-  --err: #a3341c;
-  --focus: var(--accent-deep);
-  --shadow-card: 0 1px 0 rgba(20, 20, 18, .04);
-
-  /* browser surfaces */
-  --sel-bg: var(--accent);
-  --sel-ink: var(--ink-on-accent);
-  --scroll-thumb: #cbc8be;
-  --scroll-track: transparent;
-
-  /* mode toggle glyphs */
-  --moon-display: none;
-  --sun-display: inline;
-
-  /* the ledger's text size control */
-  --zoom: 1;
-}
-
-/* The mark: a hairline yellow rectangle with the bongo pair drawn inside it in ink.
-   Scoped token override, never a :root redefinition. */
-.mark-plate {
-  --accent: var(--mark-drum);
-  --accent-deep: var(--mark-drum-deep);
-  --terracotta: var(--mark-drum-2);
-  --ink: var(--mark-drum-deep);
-  --skin-hi: var(--mark-skin-hi);
-  --skin-mid: var(--mark-skin-mid);
-  --skin-lo: var(--mark-skin-lo);
-}
-
-:root[data-mode="dark"] {
-  --bg: #0e0e0e;
-  --bg-card: #131313;
-  --bg-deep: #090909;
-  --bg-frame: #111111;
-  --ink: #ffffff;
-  --ink-soft: #b0b0b0;
-  --ink-faint: #8a8a8a;
-  --rule: #272727;
-  --rule-soft: #1a1a1a;
-
-  --font-label: var(--font-body);
-
-  --shell-radius: 14px;
-  --shell-inset: 56px;
-
-  --accent-text: var(--accent);
-  --accent-tint: rgba(255, 210, 20, .16);
-  --accent-tint-soft: rgba(255, 210, 20, .07);
-  --accent-track: #2b2b2b;
-
-  --grid-line: rgba(255, 255, 255, .075);
-  --dots: rgba(255, 255, 255, .10);
-  --dot-r: 1px;
-  --dot-pitch: 4.5px;
-  --plate: url("../../../../../.impeccable/mocks/world-assets/forest-mist.jpg");
-  --plate-filter: blur(2px) saturate(.8) contrast(1.06) brightness(.98);
-  --plate-scrim: rgba(8, 9, 10, .34);
-  --hatch: repeating-linear-gradient(45deg, rgba(255,210,20,.20) 0 5px, transparent 5px 11px);
-  --hatch-bg: rgba(255, 210, 20, .045);
-  --band-hatch: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 6px);
-
-  --planet-plate-op: 1;
-  --planet-filter: brightness(1.5) contrast(1.05);
-  --planet-body: #020303;
-  --planet-rim: rgba(216, 230, 250, .80);
-  --planet-glow: rgba(196, 218, 248, .55);
-  --planet-lift: rgba(164, 186, 220, .26);
-  --planet-halo: rgba(96, 122, 164, .17);
-
-  --limb-blend: lighten;
-  --limb-filter: brightness(.62) contrast(2.1) saturate(.85);
-  --limb-op: 1;
-  --bongo-blend: lighten;
-  --bongo-filter: brightness(1.02) contrast(1.02);
-  --bongo-op: 1;
-
-  --glass: rgba(14, 17, 20, .72);
-  --glass-edge: rgba(255, 255, 255, .22);
-  --glass-blur: 18px;
-  --glass-dim: .34;
-  --glass-shadow: 0 20px 46px rgba(0, 0, 0, .36);
-
-  --side-fill: rgba(255, 255, 255, .028);
-  --topbar-fill: rgba(255, 255, 255, .02);
-  --head-fill: rgba(255, 255, 255, .055);
-  --row-hover: rgba(255, 255, 255, .045);
-  --panel: rgba(6, 8, 10, .42);
-  --panel-edge: rgba(255, 255, 255, .10);
-  --field: rgba(255, 255, 255, .05);
-  --check-edge: rgba(255, 255, 255, .30);
-  --primary-fill: var(--accent);
-  --primary-ink: var(--ink-on-accent);
-  --nav-case: none;
-  --cur-fill: var(--accent);
-  --cur-ink: var(--ink-on-accent);
-  --cur-mark: var(--ink-on-accent);
-  --cur-dot: transparent;
-  --cur-dot-size: 0px;
-  --chip-fill: rgba(255, 255, 255, .06);
-  --chip-ink: var(--ink-soft);
-  --chip-edge: rgba(255, 255, 255, .16);
-  --lede-ink: #e6e6e6;
-
-  --map-land: #303030;
-  --map-edge: #3a3a3a;
-
-  --mark-drum: #f1f1f1;
-  --mark-drum-deep: #6b6b6b;
-  --mark-drum-2: #d2d2d2;
-  --mark-skin-hi: #ffffff;
-  --mark-skin-mid: #dcdcdc;
-  --mark-skin-lo: #9b9b9b;
-  --skin-hi: #f2ead8;
-  --skin-mid: #d8c8a6;
-  --skin-lo: #9d8259;
-  --drum-shadow: #000000;
-
-  --ok: #7fbf8b;
-  --warn: #ffd214;
-  --err: #e0664c;
-  --focus: var(--accent);
-  --shadow-card: 0 18px 60px rgba(0, 0, 0, .5);
-
-  --scroll-thumb: #3a3a3a;
-
-  --moon-display: inline;
-  --sun-display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-mode="light"]) {
-    --bg: #0e0e0e;
-    --bg-card: #131313;
-    --bg-deep: #090909;
-    --bg-frame: #111111;
-    --ink: #ffffff;
-    --ink-soft: #b0b0b0;
-    --ink-faint: #8a8a8a;
-    --rule: #272727;
-    --rule-soft: #1a1a1a;
-
-    --font-label: var(--font-body);
-
-    --shell-radius: 14px;
-    --shell-inset: 56px;
-
-    --accent-text: var(--accent);
-    --accent-tint: rgba(255, 210, 20, .16);
-    --accent-tint-soft: rgba(255, 210, 20, .07);
-    --accent-track: #2b2b2b;
-
-    --grid-line: rgba(255, 255, 255, .075);
-    --dots: rgba(255, 255, 255, .10);
-    --dot-r: 1px;
-    --dot-pitch: 4.5px;
-    --plate: url("../../../../../.impeccable/mocks/world-assets/forest-mist.jpg");
-    --plate-filter: blur(2px) saturate(.8) contrast(1.06) brightness(.98);
-    --plate-scrim: rgba(8, 9, 10, .34);
-    --hatch: repeating-linear-gradient(45deg, rgba(255,210,20,.20) 0 5px, transparent 5px 11px);
-    --hatch-bg: rgba(255, 210, 20, .045);
-    --band-hatch: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 6px);
-
-    --planet-plate-op: 1;
-    --planet-filter: brightness(1.5) contrast(1.05);
-    --planet-body: #020303;
-    --planet-rim: rgba(216, 230, 250, .80);
-    --planet-glow: rgba(196, 218, 248, .55);
-    --planet-lift: rgba(164, 186, 220, .26);
-    --planet-halo: rgba(96, 122, 164, .17);
-
-    --limb-blend: lighten;
-    --limb-filter: brightness(.62) contrast(2.1) saturate(.85);
-    --limb-op: 1;
-    --bongo-blend: lighten;
-    --bongo-filter: brightness(1.02) contrast(1.02);
-    --bongo-op: 1;
-
-    --glass: rgba(14, 17, 20, .72);
-    --glass-edge: rgba(255, 255, 255, .22);
-    --glass-blur: 18px;
-    --glass-dim: .34;
-    --glass-shadow: 0 20px 46px rgba(0, 0, 0, .36);
-
-    --side-fill: rgba(255, 255, 255, .028);
-    --topbar-fill: rgba(255, 255, 255, .02);
-    --head-fill: rgba(255, 255, 255, .055);
-    --row-hover: rgba(255, 255, 255, .045);
-    --panel: rgba(6, 8, 10, .42);
-    --panel-edge: rgba(255, 255, 255, .10);
-    --field: rgba(255, 255, 255, .05);
-    --check-edge: rgba(255, 255, 255, .30);
-    --primary-fill: var(--accent);
-    --primary-ink: var(--ink-on-accent);
-    --nav-case: none;
-    --cur-fill: var(--accent);
-    --cur-ink: var(--ink-on-accent);
-    --cur-mark: var(--ink-on-accent);
-    --cur-dot: transparent;
-    --cur-dot-size: 0px;
-    --chip-fill: rgba(255, 255, 255, .06);
-    --chip-ink: var(--ink-soft);
-    --chip-edge: rgba(255, 255, 255, .16);
-    --lede-ink: #e6e6e6;
-
-    --map-land: #303030;
-    --map-edge: #3a3a3a;
-
-    --mark-drum: #f1f1f1;
-    --mark-drum-deep: #6b6b6b;
-    --mark-drum-2: #d2d2d2;
-    --mark-skin-hi: #ffffff;
-    --mark-skin-mid: #dcdcdc;
-    --mark-skin-lo: #9b9b9b;
-    --skin-hi: #f2ead8;
-    --skin-mid: #d8c8a6;
-    --skin-lo: #9d8259;
-    --drum-shadow: #000000;
-
-    --ok: #7fbf8b;
-    --warn: #ffd214;
-    --err: #e0664c;
-    --focus: var(--accent);
-    --shadow-card: 0 18px 60px rgba(0, 0, 0, .5);
-
-    --scroll-thumb: #3a3a3a;
-
-    --moon-display: inline;
-    --sun-display: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation: none !important; transition: none !important; }
-}