/* BourneWise "Paper" skin — editorial, hand-drawn and deliberately flat. Scope: set data-skin="paper" on or any subtree root. Source: uploads/bournwise-kit (Claude-blueprint oracle chat). The system borrows the useful parts of Anthropic's editorial language without imitating its illustrations: one warm ivory field, near-black gestural marks, a clay action accent, muted carriers, generous space and slightly irregular edges. Surfaces stay opaque and two-dimensional. */ [data-skin="paper"] { /* verified editorial palette, adapted into interface roles */ --paper: #E7E1D7; /* full canvas / muted warm paper */ --paper-raised: #DED8CD; /* irregular carrier surfaces */ --paper-dim: #D4CEC3; /* compact hover and selected states */ --chip: #CBBFAD; /* oat — quiet controls */ --ink: #141413; /* dominant linework and type */ /* Three text greys, not four. Measured on the glass carriers across all 180 colour groups, the old ramp put --faint at 3.7:1 and --ghost at 2.4:1 — below the 4.5:1 floor everywhere, for roles that are real copy (the casting disclaimer, the balance caption, the composer hint). A tier that cannot be read is not a tier in the hierarchy, it is text that is missing, so --ghost now resolves to --faint rather than staying available as a shade to reach for. Hierarchy below --dim is carried by size, weight and tracking, which these roles already have. */ /* Deepened one notch 2026-08-26, when the carriers became frosted. The panel the two of them sit on is now 34% landscape rather than 24%, so on the darkest groups they composited to 3.77:1 and 2.97:1 — the same failure the grey ladder was collapsed for once already. Both keep their hue and their spacing from each other (ink→dim 1.62, dim→faint 1.26, both above the ~1.25 a reader can see); everything just moves darker together. */ --dim: #3B3A36; --faint: #4A4944; --ghost: var(--faint); --terracotta: #A85E46; /* clay — the only action accent */ --on-accent: #FFFFFF; /* text on a clay fill: --paper measures 3.71:1 there, white 4.82:1 */ /* Clay as TEXT, which is a different job from clay as a fill. --terracotta on --paper is 3.71:1 — under AA for the site's only action colour, on the site's own canvas. The fill stays exactly as it is, because that is the colour anyone actually reads as the brand; this steps the same hue toward ink only where it is being used as 11–13px type, where the shift is invisible and the margin is not: 4.66:1 on paper, 6.07:1 on white glass. Written as a mix so it follows if the accent ever moves. */ --terracotta-ink: color-mix(in srgb, var(--terracotta) 84%, var(--ink)); --danger: #A54B3C; /* form errors only. Deliberately not --terracotta: terracotta means "you can click this", and an error message is not an action. They are close on purpose (same family) and must stay distinct in role. */ --prussian: #505064; /* dark heather for transformed states */ --prussian-on: #D8DDE0; /* type on --prussian. Cooler than --paper on purpose: paper's warmth goes muddy on the heather. */ --prussian-on-dim: #BFD4EE; /* the quiet label tier on --prussian, e.g. the eyebrow over a cyanotype headline. */ --prussian-deep: #444358; --pine: #4D6159; /* dark cactus for status, never action */ --pine-deep: #40554D; --oat: #CBBFAD; --cactus: #9BAFA8; --heather: #A7A6B8; --coral: #C7AAAA; --line: #B8B0A4; --line-soft: #CEC7BC; /* three families, three jobs */ --serif: "BioRhyme", Georgia, serif; /* @kind font */ /* oracle voice, brand, numbers, display titles */ --sans: "Spinnaker", system-ui, sans-serif; /* @kind font */ /* everything else */ --font-serif: var(--serif); --font-sans: var(--sans); /* type jobs (kit-exact) */ --text-reading: 23px; /* oracle answers — serif, line-height 1.55 */ --text-label: 12px; /* system labels — sans, tracked */ --tracking-label: .09em; /* textures (paths relative to project root — re-resolve per page) */ /* assets/textures/paper-foxing.svg site-wide body background */ /* assets/textures/map-graticule.svg chat thread, empty states */ /* assets/textures/engraving-hatch.svg cards / sidebar low-noise */ /* assets/textures/cyanotype.svg login & hero only */ /* assets/textures/whorl-labyrinth.svg site / landing background */ /* semantic aliases remapped so themed pieces inherit the skin */ --surface-main: var(--paper); --surface-side: var(--paper); --accent: var(--terracotta); --slab: var(--prussian); --text-main: var(--ink); --text-on-side: var(--ink); --text-on-accent: var(--ink); --text-on-slab: var(--paper); --text-muted: var(--dim); --hairline: var(--line); --wash: var(--paper-dim); --side-wash: var(--paper-dim); --focus-ring: var(--terracotta); }