/* ============================================================ SYSTEM — V3E "PLAYFUL" (sticker sheet) Layer 2.5 of 3: tokens.css → base.css → systems/system-v3e.css → v3e.css The COMPLETE design vocabulary for the playful skin — sunny cream surfaces, pastel candy tints, white-bordered stickers with a hand-placed tilt, chunky Baloo 2 headlines, squishy pop-and-float motion. Deliberately broader than v3e.css currently consumes; new components must draw from here. Namespace: --p-* Scope: .p-body Palette source: --cr-* All values derive from tokens.css; no new hex is introduced. The skin re-declares a handful of these props verbatim after this file loads — identical names + values, identical result. ============================================================ */ .p-body { /* -------------------------------------------------------- BASE SEMANTIC REMAP (rule 4) Point base.css' component bones at the playful palette: a sunny cream page, teal-tinted cool band, crimson accent, gold secondary, teal links. Values equal what .p-body resolves today so base bones inherit unchanged. -------------------------------------------------------- */ --surface: var(--cr-gold-100); /* warm sunny cream page */ --surface-alt: var(--cr-teal-050); /* cool pastel band */ --ink: var(--cr-ink); --ink-soft: var(--cr-ink-soft); --accent: var(--cr-crimson); /* candy-red primary */ --accent-2: var(--cr-gold); /* sunshine secondary */ --link: var(--cr-teal); /* -------------------------------------------------------- 1. SURFACES Playful stacks paper layers: sunny cream floor, pure-white sticker faces, a cool pastel band for rhythm, a deep teal inverse for the contact panel, a frosted veil for the nav. -------------------------------------------------------- */ --p-surface-0: var(--cr-gold-100); /* page floor (cream) */ --p-surface-1: var(--cr-white); /* sticker / card face */ --p-surface-2: var(--cr-teal-050); /* cool pastel band */ --p-band: var(--cr-teal-050); /* skin alias of -2 */ --p-surface-3: var(--cr-gold-300); /* warm accent wash */ --p-surface-inverse: var(--cr-deep); /* teal contact panel */ --p-veil: color-mix(in oklab, var(--cr-white) 88%, transparent); /* frosted nav glass */ /* -------------------------------------------------------- 2. INK Deep teal-navy text on cream; teal is the signature heading ink (warmer + friendlier than pure black); white reads on the inverse panel. -------------------------------------------------------- */ --p-ink-strong: var(--cr-ink); --p-ink: var(--cr-ink); --p-ink-soft: var(--cr-ink-soft); --p-ink-faint: color-mix(in oklab, var(--cr-ink-soft) 55%, var(--cr-white)); --p-ink-inverse: var(--cr-white); /* on teal panel */ --p-ink-accent: var(--cr-teal); /* headline teal */ /* -------------------------------------------------------- 3. ACCENTS Primary = candy crimson (buttons, accent words). Secondary = sunshine gold (tags, hero CTA on teal). A teal tertiary is added because the skin leans on teal for headings, links and ghost buttons — coherent extension, still palette-pure. -------------------------------------------------------- */ --p-accent: var(--cr-crimson); --p-accent-hover: var(--cr-crimson-700); --p-accent-active: color-mix(in oklab, var(--cr-crimson-700) 85%, black); --p-accent-subtle: var(--cr-crimson-100); /* pastel crimson tint */ --p-accent-contrast: var(--cr-white); --p-accent-2: var(--cr-gold); --p-accent-2-subtle: var(--cr-gold-300); --p-accent-2-contrast: var(--cr-deep); --p-accent-3: var(--cr-teal); /* tertiary (headings/links) */ --p-accent-3-subtle: var(--cr-teal-100); --p-accent-3-contrast: var(--cr-white); /* -------------------------------------------------------- 4. LINES The playful line is not a hairline — it is a thick WHITE sticker die-cut. Hairlines stay for the rare faint divider; gold reads as the accented cut + focus ring. -------------------------------------------------------- */ --p-line-hair: color-mix(in oklab, var(--cr-ink) 12%, transparent); --p-line: var(--cr-white); /* sticker die-cut */ --p-line-strong: var(--cr-gold); /* accented cut */ --p-line-focus: var(--cr-gold); /* focus ring */ --p-bw-hair: 2px; --p-bw: 3px; --p-bw-strong: 3.5px; --p-border: 3.5px solid var(--cr-white); /* skin: card die-cut */ /* -------------------------------------------------------- 5. TYPE Chunky rounded Baloo 2 for anything expressive (headlines, tags, pills, labels); Proxima Nova for reading. Tight tracking on big display, wide tracking on the uppercase switcher label. -------------------------------------------------------- */ --p-font-display: var(--font-round); /* Baloo 2 */ --p-font-body: var(--font-body); /* Proxima Nova */ --p-font-accent: var(--font-round); /* tags / pills */ --p-type-hero: var(--text-hero); --p-type-display: var(--text-2xl); --p-type-title: var(--text-xl); --p-type-heading: var(--text-lg); --p-type-label: var(--text-sm); --p-type-body: var(--text-base); --p-type-caption: var(--text-xs); --p-track-tight: -0.015em; --p-track: 0.01em; --p-track-wide: 0.14em; --p-lead-tight: var(--leading-tight); --p-lead: var(--leading-body); --p-lead-loose: 1.8; --p-weight-display: 800; /* Baloo extra-bold */ --p-weight-heading: 700; --p-weight-body: 400; /* -------------------------------------------------------- 6. SPACE Straight aliases of the shared --sp-* scale so playful spacing stays in lockstep with the other variants. -------------------------------------------------------- */ --p-gap-2xs: var(--sp-1); --p-gap-xs: var(--sp-2); --p-gap-sm: var(--sp-3); --p-gap-md: var(--sp-4); --p-gap-lg: var(--sp-6); --p-gap-xl: var(--sp-8); --p-gap-2xl: var(--sp-12); --p-pad-inline: var(--gutter); --p-section: var(--sp-section); --p-measure: var(--measure); /* -------------------------------------------------------- 7. SHAPE Everything is soft: pill for buttons/tags/nav, generous rounds for cards, plus the signature organic BLOB radii used by floating shapes, the hero frame and note pins. -------------------------------------------------------- */ --p-radius-none: 0; --p-radius-sm: var(--radius-sm); --p-radius: var(--radius-md); /* notes / stickers */ --p-radius-lg: var(--radius-lg); /* svc cards / panel */ --p-radius-full: var(--radius-pill); /* buttons / tags */ --p-blobr: 60% 40% 55% 45% / 50% 60% 40% 55%; /* skin: primary blob */ --p-blobr-2: 55% 45% 40% 60% / 45% 55% 45% 55%; /* teal blob */ --p-blobr-3: 58% 42% 47% 53% / 55% 48% 52% 45%; /* soft wash */ --p-blobr-4: 52% 48% 55% 45% / 50% 52% 48% 50%; /* panel wash */ --p-blobr-art: 42% 58% 55% 45% / 55% 45% 55% 45%; /* hero frame */ --p-blobr-pin: 58% 42% 52% 48% / 55% 50% 50% 45%; /* note pin */ /* -------------------------------------------------------- 8. ELEVATION Stickers hover off the page. Two lift depths carry the resting/hover states; a deeper shadow is reserved for the largest peeled elements. -------------------------------------------------------- */ --p-lift-sm: 0 8px 18px color-mix(in oklab, var(--cr-deep) 13%, transparent); /* skin: resting */ --p-lift: 0 12px 26px color-mix(in oklab, var(--cr-deep) 16%, transparent); /* skin: hover */ --p-shadow-1: var(--p-lift-sm); --p-shadow-2: var(--p-lift); --p-shadow-3: 0 18px 40px color-mix(in oklab, var(--cr-deep) 20%, transparent); --p-lift-hover: var(--p-lift); /* -------------------------------------------------------- 9. MOTION Squishy + bouncy: quick springy ease for hovers, a slow drifting float for blobs, a pop-in on entry. Tilt is the signature "hand-placed sticker" rotation. -------------------------------------------------------- */ --p-dur-quick: var(--dur-fast); /* 160ms */ --p-dur: var(--dur-med); /* 320ms */ --p-dur-slow: var(--dur-slow); /* 640ms */ --p-ease: var(--ease-out); --p-rise: 14px; /* pop-in entry distance */ --p-tilt: -2deg; /* signature tilt */ --p-dur-float: 11s; /* blob drift loop */ --p-dur-pop: 0.62s; /* hero pop-in */ --p-tilt-sm: -1deg; --p-tilt-lg: 3deg; --p-hover-scale: 1.05; /* grow on hover */ --p-hover-rotate: -2deg; /* wiggle on hover */ --p-press-scale: 0.97; /* squish on press */ /* -------------------------------------------------------- 10. COMPONENTS Recipes assembled from the tokens above so future widgets match the buttons / fields / tags / dock the skin ships. -------------------------------------------------------- */ /* squishy pill button (primary) */ --p-btn-bg: var(--cr-crimson); --p-btn-ink: var(--cr-white); --p-btn-border: 3px solid var(--cr-white); --p-btn-radius: var(--radius-pill); --p-btn-shadow: var(--p-lift-sm); --p-btn-bg-hover: var(--cr-crimson-700); /* friendly rounded field */ --p-field-bg: var(--cr-white); --p-field-ink: var(--cr-ink); --p-field-border: 2.5px solid color-mix(in oklab, var(--cr-teal) 24%, transparent); --p-field-border-focus:var(--cr-gold); --p-field-label: var(--cr-teal); /* candy-pill tag */ --p-tag-bg: var(--cr-gold-300); --p-tag-ink: var(--cr-teal); --p-tag-radius: var(--radius-pill); /* sticker-pill switcher dock */ --p-dock-bg: var(--cr-white); --p-dock-border: 3px solid var(--cr-gold); --p-dock-item-ink: var(--cr-teal); --p-dock-active-bg: var(--cr-crimson); --p-dock-active-ink: var(--cr-white); /* links */ --p-link-ink: var(--cr-teal); --p-link-underline: var(--cr-crimson); }