@bongos/core 1.19.726 → 1.19.727

package/docs/design/mocks/world/organic-cards/_tokens.css

@@ -1,462 +0,0 @@
-/* organic-cards - "The grove": Cloud Bongos as a sculpted paper garden, every value sampled from the owner's
-   template (site-4-green-brown-organic-card-system.jpg) and from the two ground plates the pages actually ship.
-   Palette strategy: FULL - three named fields carry the system (sea green grounds the slab, bark brown the
-   quiet marks, lit tan every live or pressable thing), with wood terracotta reserved for the small drum in the
-   bongo mark. All four are world constants that never flip with the mode; only the neutrals and the plates do.
-   Faces: Nunito 400/600/800 (the template's rounded, wide-aperture voice); JetBrains Mono 400/500 only for the
-   light hall's uppercase labels, per the hall-1 template.
-   Materials: photographic leaf plates over sculpted paper, a soft-focus forest behind the dark hall's glass,
-   paper grain plus a raking ripple, tinted (never grey) shadows, circular badges, 1px light edges on dark glass.
-   Corners: ALL-SOFT - 22px on cards and containers, 12px on chips, pill on buttons, inputs and tabs.
-   Derived from the contract: the fifteen contract tokens are the host's override surface and carry the world's
-   identity - --sea is the slab and the light primary, --accent every live or pressable thing, --accent-deep every
-   quiet mark, --terracotta the small drum in the bongo mark. Everything below them is a DERIVED token: the fields,
-   surface fills, edges, plates, bars and control colours are named here so page CSS never holds a colour, and a
-   host may override any of them too. Page CSS consumes tokens only and never branches on the colour mode; the
-   sole literals left in the two pages carry no hue at all: the mark's four specular #fff highlights, which stay
-   white by contract, white inset sheens that tint a material, and the #000 channel of one mask gradient. */
-
-:root {
-  /* ---- the four named fields + cream: world constants, identical in both modes ---- */
-  --sea: #2a5a46;          /* green  - the ground of the grove       */
-  --accent-deep: #74513a;  /* brown  - bark, the second field        */
-  --accent: #e3c39c;       /* tan    - the lit thing: badges, doors  */
-  --terracotta: #b07a4e;   /* wood   - the small drum's shell        */
-  --cream: #f2e6c8;        /* cream  - type on any dark field        */
-
-  --font-display: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
-  --font-body: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
-
-  --radius: 22px;
-  --radius-sm: 12px;
-  --radius-pill: 999px;
-  --line: 1px;
-  --zoom: 1;
-
-  /* the inherited bongo mark (top bar + hall): warm wood shells, cream heads */
-  --skin-hi: #fdf3de;
-  --skin-mid: #edd4a8;
-  --skin-lo: #c6a273;
-  --drum-shadow: #13291e;
-
-  /* the rendered hero object: wood bongos with a monstera leaf, real alpha, reads on both grounds */
-  --plate-object: url(../../../../../.impeccable/mocks/world-assets/r2-bongos-organic-a-cut.png);
-
-  /* paper grain and the template's raking ripple, layered over every ground */
-  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
-  /* the template's raking ripple runs ACROSS the ground, almost horizontal, in wide soft bands */
-  --ripple: repeating-linear-gradient(174deg, rgba(255, 255, 255, .034) 0 7px, rgba(0, 0, 0, .030) 7px 20px, transparent 20px 58px);
-
-  /* the wide feature slab (the template's signature dark-green panel): dark in BOTH modes, so its
-     ink, hairlines and track are world constants; only the fill follows the ground it sits on */
-  --on-sea: #f2e6c8;
-  --on-sea-soft: #ccd6b7;
-  --sea-rule: rgba(242, 230, 200, .20);
-  --sea-track: rgba(9, 26, 19, .45);
-  --slab-edge: rgba(242, 230, 200, .17);
-  --slab-div: rgba(242, 230, 200, .13);
-
-  /* --lead / --lead-dot (the leader line into the photograph) are per-mode: the tan reads on the dark
-     plate but measures 1.5:1 on the pale one, so light derives them from --accent-deep instead. */
-
-  /* ================= LIGHT (the pale sage twin, sampled from r2-leaves-light.jpg) ================= */
-  --bg: #c8d7bf;
-  --bg-card: #f4f7f0;
-  --bg-deep: #b7cbaf;
-  --bg-frame: #d9e4d0;
-  --ink: #163c2a;
-  --ink-soft: #2f5240;
-  --ink-faint: #476350;
-  --rule: #9db69a;
-  --rule-soft: #c6d5c0;
-
-  --ok: #2e6b45;
-  --warn: #7d5410;
-  --err: #8d3a22;
-  --focus: var(--accent-deep);
-  --on-accent: #2c4636;
-
-  --shadow-card: 8px 14px 26px -14px rgba(58, 74, 58, .42), 2px 3px 7px rgba(58, 74, 58, .14);
-  --shadow-lift: 12px 24px 40px -16px rgba(58, 74, 58, .48), 3px 5px 11px rgba(58, 74, 58, .18);
-  --mark-shadow: 24px 32px 46px rgba(78, 94, 76, .38);
-  --grain-op: .07;
-  --ripple-op: .17;
-  --ground-glow: radial-gradient(1200px 700px at 50% 8%, rgba(255, 255, 255, .55), transparent 62%),
-                 radial-gradient(130% 105% at 50% 46%, transparent 42%, rgba(120, 134, 112, .30));
-
-  --plate-hero: url(../../../../../.impeccable/mocks/world-assets/r2-leaves-light.jpg);
-  --plate-forest: none;
-  --plate-leaf: none;
-  --forest-filter: none;
-  --leaf-op: 0;
-  --hall-tint: linear-gradient(180deg, #d9e4d0, #cedcc4);
-  --hero-band: linear-gradient(152deg, #d5e1cc 0%, #c8d7bf 50%, #bccfb2 100%);
-  --scrim-a: rgba(240, 244, 234, .50);
-  --scrim-mid: rgba(240, 244, 234, .22);
-  --scrim-b: rgba(240, 244, 234, 0);
-  --scrim-reach: 66%;
-  --head-band: linear-gradient(150deg, #b9cdb0 0%, #c6d6ba 50%, #aec3a6 100%);
-  /* the light plate carries a straight sage-to-cream paper seam at its 33% mark; crop past it so the
-     hero ground is one continuous cream field rather than a hard vertical step behind the headline */
-  --plate-size: auto 150%;
-  --plate-pos: 93% center;
-  --slab: var(--sea);
-
-  --field-green: #c7d9b8;
-  --on-green: #163c2a;
-  --on-green-soft: #3d5c48;
-  --field-brown: #74513a;
-  --on-brown: #f2e6c8;
-  --on-brown-soft: #e6d4b5;
-  --field-tan: #e8cfa8;
-  --on-tan: #2a4436;
-  --on-tan-soft: #3f5a4a;
-  --field-deep: #5b4130;
-  --on-deep: #f2e6c8;
-  --on-deep-soft: #dcc7a6;
-  --field-mute: #c2cdbc;
-  --on-mute: #3d5245;
-
-  --tile-fill: rgba(206, 222, 199, .90);
-  --tile-edge: rgba(22, 60, 42, .13);
-  --tile-ink: #163c2a;
-  --bar-track: #c3d3bd;
-  --bar-fill: linear-gradient(90deg, #c1904f, #dcb480);
-
-  --glass: #f4f7f0;
-  --glass-edge: #ccdac5;
-  --glass-filter: none;
-  --glass-inner: none;
-  --panel: #f9fbf6;
-  --panel-edge: #d7e2d1;
-  --side-bg: #eff3e9;
-  --side-edge: #dae5d2;
-  --thead-bg: #eef3e8;
-
-  --row-alt: rgba(22, 60, 42, .030);
-  --row-hover: rgba(116, 81, 58, .09);
-  --row-dim: .62;
-  --hatch: color-mix(in srgb, var(--warn) 26%, transparent);
-  --hatch-ink: var(--warn);
-  --ink-held: var(--ink-faint);
-  /* the core goes well below the accent's own value: a mid-tone core against mid-tone foliage lands at
-     2.3:1 whichever way you turn it, so the pair is a near-black core inside a near-white casing */
-  --lead: color-mix(in srgb, var(--accent-deep) 44%, #000000);
-  --lead-dot: var(--accent-deep);
-  --lead-case: rgba(248, 250, 244, .94);
-  --shade: rgba(58, 74, 58, .34);
-  --opt-fg: #163c2a;
-  --opt-bg: #f4f7f0;
-  --input-bg: #ffffff;
-  --input-bd: #b7c9b1;
-
-  --nav-cur-bg: color-mix(in srgb, var(--accent-deep) 13%, var(--side-bg));
-  --nav-cur-fg: var(--accent-deep);
-  --nav-hover: rgba(42, 90, 70, .10);
-  --rank-bg: color-mix(in srgb, var(--accent-deep) 12%, var(--panel));
-  --rank-fg: var(--accent-deep);
-  --rank-bd: color-mix(in srgb, var(--accent-deep) 30%, transparent);
-  --tab-sel-bg: transparent;
-  --tab-sel-fg: var(--accent-deep);
-  --tab-sel-line: inset 0 -2px 0 var(--accent-deep);
-  --tab-radius: 11px 11px 3px 3px;
-  --tab-bg: transparent;
-  --tab-bd: transparent;
-  --btn-1-bg: var(--sea);
-  --btn-1-fg: #f2e6c8;
-  --btn-2-bg: transparent;
-  --btn-2-fg: var(--accent-deep);
-  --btn-2-bd: var(--accent-deep);
-  --btn-o-bg: transparent;
-  --btn-o-fg: var(--accent-deep);
-  --btn-o-bd: var(--accent-deep);
-  --door-2-bd: rgba(22, 60, 42, .50);
-
-  --label-font: var(--font-mono);
-  --label-ls: .06em;
-  --label-weight: 500;
-  --nav-font: var(--font-mono);
-  --nav-tt: uppercase;
-  --nav-ls: .04em;
-  --nav-weight: 400;
-  --th-font: var(--font-mono);
-  --th-tt: uppercase;
-  --th-ls: .05em;
-  --th-weight: 500;
-  --side-brand: block;
-
-  --sb-thumb: #a8bda2;
-  --sb-track: transparent;
-  --moon-o: 0;
-  --sun-o: 1;
-  --toggle-bg: #c1d2b9;
-  --toggle-bd: rgba(22, 60, 42, .24);
-}
-
-/* ================= DARK (judged first: the template's green world) ================= */
-:root[data-mode="dark"] {
-  --bg: #2f6049;
-  --bg-card: #3a6d57;
-  --bg-deep: #22503e;
-  --bg-frame: #15382a;
-  --ink: #f2e6c8;
-  --ink-soft: #e0cfab;
-  --ink-faint: #c3d4bd;
-  --rule: rgba(242, 230, 200, .22);
-  --rule-soft: rgba(242, 230, 200, .11);
-
-  --ok: #8fc79c;
-  --warn: #e2b45c;
-  --err: #e08c6a;
-  --focus: color-mix(in srgb, var(--accent) 82%, #ffffff);
-  --on-accent: #1b3a2a;
-
-  --shadow-card: 10px 18px 32px -16px rgba(8, 24, 16, .80), 2px 3px 8px rgba(8, 24, 16, .34);
-  --shadow-lift: 14px 28px 46px -18px rgba(8, 24, 16, .86), 3px 5px 12px rgba(8, 24, 16, .40);
-  --mark-shadow: 26px 34px 52px rgba(7, 22, 15, .68);
-  --grain-op: .06;
-  --ripple-op: .40;
-  --ground-glow: radial-gradient(1200px 700px at 50% 8%, rgba(255, 255, 255, .10), transparent 62%),
-                 radial-gradient(130% 105% at 50% 46%, transparent 40%, rgba(9, 28, 19, .52));
-
-  --plate-hero: url(../../../../../.impeccable/mocks/world-assets/r2-leaves-dark.jpg);
-  --plate-forest: url(../../../../../.impeccable/mocks/world-assets/forest-mist.jpg);
-  --plate-leaf: url(../../../../../.impeccable/mocks/world-assets/r2-leaves-dark.jpg);
-  --forest-filter: blur(2px) saturate(.88) brightness(1.16) contrast(1.14);
-  --leaf-op: .12;
-  --hall-tint: linear-gradient(180deg, rgba(17, 40, 30, .24), rgba(9, 26, 19, .46));
-  --hero-band: linear-gradient(152deg, #37684f 0%, #2f6049 46%, #24523e 100%);
-  --scrim-a: rgba(18, 42, 32, .34);
-  --scrim-mid: rgba(18, 42, 32, .15);
-  --scrim-b: rgba(18, 42, 32, 0);
-  --scrim-reach: 54%;
-  --head-band: linear-gradient(150deg, #3f7264 0%, #356254 48%, #284c40 100%);
-  --plate-size: cover;
-  --plate-pos: right center;
-  --slab: color-mix(in srgb, var(--sea) 74%, #000000);
-
-  --field-green: #7c9c64;
-  --on-green: #11261b;
-  --on-green-soft: #16301f;
-  --field-brown: #6b4a35;
-  --on-brown: #f2e6c8;
-  --on-brown-soft: #ddc9a7;
-  --field-tan: #d5b48f;
-  --on-tan: #1b3a2a;
-  --on-tan-soft: #2c4436;
-  --field-deep: #3d2b1f;
-  --on-deep: #ecdcbb;
-  --on-deep-soft: #c9b795;
-  --field-mute: #2f4a3c;
-  --on-mute: #b9c9b3;
-
-  --tile-fill: rgba(28, 66, 52, .80);
-  --tile-edge: rgba(242, 230, 200, .17);
-  --tile-ink: #f2e6c8;
-  --bar-track: rgba(10, 28, 20, .48);
-  --bar-fill: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, #8a6a44), var(--accent));
-
-  --glass: rgba(19, 42, 32, .42);
-  --glass-edge: rgba(244, 236, 214, .34);
-  --glass-filter: blur(22px) saturate(1.08);
-  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .14);
-  --panel: rgba(15, 37, 28, .34);
-  --panel-edge: rgba(244, 236, 214, .13);
-  --side-bg: rgba(12, 32, 24, .40);
-  --side-edge: rgba(244, 236, 214, .13);
-  --thead-bg: rgba(12, 32, 24, .58);
-
-  --row-alt: rgba(255, 255, 255, .030);
-  --row-hover: color-mix(in srgb, var(--accent) 12%, transparent);
-  --row-dim: .58;
-  --hatch: color-mix(in srgb, var(--warn) 34%, transparent);
-  --hatch-ink: var(--warn);
-  --ink-held: var(--ink-faint);
-  --lead: var(--accent);
-  --lead-dot: var(--accent);
-  --lead-case: rgba(9, 26, 19, .88);
-  --shade: rgba(7, 22, 15, .55);
-  --opt-fg: #f2e6c8;
-  --opt-bg: #1e4335;
-  --input-bg: rgba(8, 24, 17, .42);
-  --input-bd: rgba(244, 236, 214, .20);
-
-  --nav-cur-bg: var(--accent);
-  --nav-cur-fg: var(--on-accent);
-  --nav-hover: rgba(242, 230, 200, .09);
-  --rank-bg: transparent;
-  --rank-fg: #f2e6c8;
-  --rank-bd: rgba(242, 230, 200, .32);
-  --tab-sel-bg: var(--accent);
-  --tab-sel-fg: var(--on-accent);
-  --tab-sel-line: none;
-  --tab-radius: var(--radius-pill);
-  --tab-bg: rgba(255, 255, 255, .05);
-  --tab-bd: rgba(244, 236, 214, .14);
-  --btn-1-bg: var(--accent);
-  --btn-1-fg: var(--on-accent);
-  --btn-2-bg: transparent;
-  --btn-2-fg: #f2e6c8;
-  --btn-2-bd: rgba(242, 230, 200, .34);
-  --btn-o-bg: transparent;
-  --btn-o-fg: #f2e6c8;
-  --btn-o-bd: rgba(242, 230, 200, .34);
-  --door-2-bd: rgba(242, 230, 200, .40);
-
-  --label-font: var(--font-body);
-  --label-ls: .13em;
-  --label-weight: 700;
-  --nav-font: var(--font-body);
-  --nav-tt: none;
-  --nav-ls: .005em;
-  --nav-weight: 600;
-  --th-font: var(--font-body);
-  --th-tt: none;
-  --th-ls: .01em;
-  --th-weight: 700;
-  --side-brand: block;
-
-  --sb-thumb: rgba(242, 230, 200, .22);
-  --sb-track: transparent;
-  --moon-o: 1;
-  --sun-o: 0;
-  --toggle-bg: rgba(9, 26, 19, .55);
-  --toggle-bd: rgba(242, 230, 200, .24);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-mode="light"]) {
-  --bg: #2f6049;
-  --bg-card: #3a6d57;
-  --bg-deep: #22503e;
-  --bg-frame: #15382a;
-  --ink: #f2e6c8;
-  --ink-soft: #e0cfab;
-  --ink-faint: #c3d4bd;
-  --rule: rgba(242, 230, 200, .22);
-  --rule-soft: rgba(242, 230, 200, .11);
-
-  --ok: #8fc79c;
-  --warn: #e2b45c;
-  --err: #e08c6a;
-  --focus: color-mix(in srgb, var(--accent) 82%, #ffffff);
-  --on-accent: #1b3a2a;
-
-  --shadow-card: 10px 18px 32px -16px rgba(8, 24, 16, .80), 2px 3px 8px rgba(8, 24, 16, .34);
-  --shadow-lift: 14px 28px 46px -18px rgba(8, 24, 16, .86), 3px 5px 12px rgba(8, 24, 16, .40);
-  --mark-shadow: 26px 34px 52px rgba(7, 22, 15, .68);
-  --grain-op: .06;
-  --ripple-op: .40;
-  --ground-glow: radial-gradient(1200px 700px at 50% 8%, rgba(255, 255, 255, .10), transparent 62%),
-                 radial-gradient(130% 105% at 50% 46%, transparent 40%, rgba(9, 28, 19, .52));
-
-  --plate-hero: url(../../../../../.impeccable/mocks/world-assets/r2-leaves-dark.jpg);
-  --plate-forest: url(../../../../../.impeccable/mocks/world-assets/forest-mist.jpg);
-  --plate-leaf: url(../../../../../.impeccable/mocks/world-assets/r2-leaves-dark.jpg);
-  --forest-filter: blur(2px) saturate(.88) brightness(1.16) contrast(1.14);
-  --leaf-op: .12;
-  --hall-tint: linear-gradient(180deg, rgba(17, 40, 30, .24), rgba(9, 26, 19, .46));
-  --hero-band: linear-gradient(152deg, #37684f 0%, #2f6049 46%, #24523e 100%);
-  --scrim-a: rgba(18, 42, 32, .34);
-  --scrim-mid: rgba(18, 42, 32, .15);
-  --scrim-b: rgba(18, 42, 32, 0);
-  --scrim-reach: 54%;
-  --head-band: linear-gradient(150deg, #3f7264 0%, #356254 48%, #284c40 100%);
-  --plate-size: cover;
-  --plate-pos: right center;
-  --slab: color-mix(in srgb, var(--sea) 74%, #000000);
-
-  --field-green: #7c9c64;
-  --on-green: #11261b;
-  --on-green-soft: #16301f;
-  --field-brown: #6b4a35;
-  --on-brown: #f2e6c8;
-  --on-brown-soft: #ddc9a7;
-  --field-tan: #d5b48f;
-  --on-tan: #1b3a2a;
-  --on-tan-soft: #2c4436;
-  --field-deep: #3d2b1f;
-  --on-deep: #ecdcbb;
-  --on-deep-soft: #c9b795;
-  --field-mute: #2f4a3c;
-  --on-mute: #b9c9b3;
-
-  --tile-fill: rgba(28, 66, 52, .80);
-  --tile-edge: rgba(242, 230, 200, .17);
-  --tile-ink: #f2e6c8;
-  --bar-track: rgba(10, 28, 20, .48);
-  --bar-fill: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, #8a6a44), var(--accent));
-
-  --glass: rgba(19, 42, 32, .42);
-  --glass-edge: rgba(244, 236, 214, .34);
-  --glass-filter: blur(22px) saturate(1.08);
-  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .14);
-  --panel: rgba(15, 37, 28, .34);
-  --panel-edge: rgba(244, 236, 214, .13);
-  --side-bg: rgba(12, 32, 24, .40);
-  --side-edge: rgba(244, 236, 214, .13);
-  --thead-bg: rgba(12, 32, 24, .58);
-
-  --row-alt: rgba(255, 255, 255, .030);
-  --row-hover: color-mix(in srgb, var(--accent) 12%, transparent);
-  --row-dim: .58;
-  --hatch: color-mix(in srgb, var(--warn) 34%, transparent);
-  --hatch-ink: var(--warn);
-  --ink-held: var(--ink-faint);
-  --lead: var(--accent);
-  --lead-dot: var(--accent);
-  --lead-case: rgba(9, 26, 19, .88);
-  --shade: rgba(7, 22, 15, .55);
-  --opt-fg: #f2e6c8;
-  --opt-bg: #1e4335;
-  --input-bg: rgba(8, 24, 17, .42);
-  --input-bd: rgba(244, 236, 214, .20);
-
-  --nav-cur-bg: var(--accent);
-  --nav-cur-fg: var(--on-accent);
-  --nav-hover: rgba(242, 230, 200, .09);
-  --rank-bg: transparent;
-  --rank-fg: #f2e6c8;
-  --rank-bd: rgba(242, 230, 200, .32);
-  --tab-sel-bg: var(--accent);
-  --tab-sel-fg: var(--on-accent);
-  --tab-sel-line: none;
-  --tab-radius: var(--radius-pill);
-  --tab-bg: rgba(255, 255, 255, .05);
-  --tab-bd: rgba(244, 236, 214, .14);
-  --btn-1-bg: var(--accent);
-  --btn-1-fg: var(--on-accent);
-  --btn-2-bg: transparent;
-  --btn-2-fg: #f2e6c8;
-  --btn-2-bd: rgba(242, 230, 200, .34);
-  --btn-o-bg: transparent;
-  --btn-o-fg: #f2e6c8;
-  --btn-o-bd: rgba(242, 230, 200, .34);
-  --door-2-bd: rgba(242, 230, 200, .40);
-
-  --label-font: var(--font-body);
-  --label-ls: .13em;
-  --label-weight: 700;
-  --nav-font: var(--font-body);
-  --nav-tt: none;
-  --nav-ls: .005em;
-  --nav-weight: 600;
-  --th-font: var(--font-body);
-  --th-tt: none;
-  --th-ls: .01em;
-  --th-weight: 700;
-  --side-brand: block;
-
-  --sb-thumb: rgba(242, 230, 200, .22);
-  --sb-track: transparent;
-  --moon-o: 1;
-  --sun-o: 0;
-  --toggle-bg: rgba(9, 26, 19, .55);
-  --toggle-bd: rgba(242, 230, 200, .24);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation: none !important; transition: none !important; }
-}