/* CHIKARA Theme Kit 1.0.0 (chikara-theme.css): five plaster themes x two accents (Gold, Champagne).
   Plaster = the Trailblazers gamazine recipe (feTurbulence 0.78, 5 octaves, seed 11, raked light, 320 px tile). Only the tile's fill colour and relief
   profile change per theme. The tile is a ~1 KB data URI painted as a cached repeating image, not a live filter.

   HOW TO USE (3 steps):
   1. Put <link rel="stylesheet" href="chikara-theme.css"> after your own CSS, and set data-theme / data-family / data-accent on <html> (chikara-theme.js does it).
   2. Mark your elements with the hook classes: .ck-bar (top bar, dock, sheets), .ck-panel (cards), .ck-display (big headings), .ck-btn (gold/champagne button).
      Or, in your own CSS, use the variables directly (see CONTRACT below). Navigator does the second (css/themes-navigator.css).
   3. Use the variables for colour in your own CSS: color: var(--text); background: var(--surface-2); border: 1px solid var(--line).

   CONTRACT (variables every theme and accent sets):
     --text --muted --surface --surface-2 --surface-3 --line --hair --scrim --shadow
     --gold --gold-hi --gold-deep --gold-band (the accent: Gold or Champagne) --metal (heading gradient)
     --teal --teal-hi --teal-deep --state --state-text (status colours)
     --ck-canvas --ck-bar (ready-made plaster backgrounds), --ck-panel-shadow, --metal-filter
   Texture off: set data-texture="off" or data-gfx="lite" on <html> and the plaster becomes a flat colour with the same layout.
   Add a theme: open theme-lab.html, enter a colour, paste the two outputs (one CSS block, one JS row). ASCII only. */

/* ── themes: each sets the tile and the surface/text tokens. Emerald, Claret, Mustard, Vellum, Obsidian. ── */
html[data-theme="emerald"] {
  --gz-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='5' seed='11' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2.6' result='light'%3E%3CfeDistantLight azimuth='42' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer in='light' result='soft'%3E%3CfeFuncR type='linear' slope='0.82' intercept='0.06'/%3E%3CfeFuncG type='linear' slope='0.82' intercept='0.06'/%3E%3CfeFuncB type='linear' slope='0.82' intercept='0.06'/%3E%3C/feComponentTransfer%3E%3CfeBlend mode='multiply' in='SourceGraphic' in2='soft' result='textured'/%3E%3CfeComposite in='textured' in2='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Crect width='320' height='320' fill='%230a7561' filter='url(%23g)'/%3E%3C/svg%3E");
  --plaster-base: #06483d; --bar-base: #04302a; --bar-shade: .22; --glow: rgba(52, 170, 140, .14); --shade: rgba(0, 0, 0, .50);
  --surface: #05382f; --surface-2: rgba(3, 31, 26, .40); --surface-3: rgba(255, 255, 255, .09);
  --text: #ebe5d3; --muted: #b6cbc0;
  --teal: #4fc3a6; --teal-hi: #8fe3cc; --teal-deep: #8fe3cc;
  --scrim: rgba(2, 18, 14, .62); --shadow: 0 20px 50px rgba(0, 0, 0, .42);
  --gf-a: rgba(16, 104, 88, .95); --gf-b: rgba(3, 40, 33, .92);
}
html[data-theme="claret"] {
  --gz-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='5' seed='11' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2.6' result='light'%3E%3CfeDistantLight azimuth='42' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer in='light' result='soft'%3E%3CfeFuncR type='linear' slope='0.82' intercept='0.06'/%3E%3CfeFuncG type='linear' slope='0.82' intercept='0.06'/%3E%3CfeFuncB type='linear' slope='0.82' intercept='0.06'/%3E%3C/feComponentTransfer%3E%3CfeBlend mode='multiply' in='SourceGraphic' in2='soft' result='textured'/%3E%3CfeComposite in='textured' in2='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Crect width='320' height='320' fill='%23a91b48' filter='url(%23g)'/%3E%3C/svg%3E");
  --plaster-base: #66102d; --bar-base: #3a0a1a; --bar-shade: .24; --glow: rgba(214, 84, 120, .16); --shade: rgba(0, 0, 0, .52);
  --surface: #4c0c22; --surface-2: rgba(26, 3, 12, .40); --surface-3: rgba(255, 255, 255, .09);
  --text: #f6e9df; --muted: #dec5c3;
  --teal: #58c9b2; --teal-hi: #86e0cb; --teal-deep: #86e0cb;
  --scrim: rgba(24, 2, 10, .62); --shadow: 0 20px 50px rgba(0, 0, 0, .45);
  --gf-a: rgba(130, 32, 66, .95); --gf-b: rgba(44, 6, 20, .92);
}
html[data-theme="mustard"] {
  --gz-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='5' seed='11' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2.6' result='light'%3E%3CfeDistantLight azimuth='42' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer in='light' result='soft'%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.58'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.58'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.58'/%3E%3C/feComponentTransfer%3E%3CfeBlend mode='multiply' in='SourceGraphic' in2='soft' result='textured'/%3E%3CfeComposite in='textured' in2='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Crect width='320' height='320' fill='%23d6a82b' filter='url(%23g)'/%3E%3C/svg%3E");
  --plaster-base: #c9a028; --bar-base: #c29627; --bar-shade: 0; --glow: rgba(255, 236, 170, .30); --shade: rgba(90, 56, 0, .12);
  --surface: #c9a028; --surface-2: rgba(255, 246, 214, .38); --surface-3: rgba(255, 246, 214, .56);
  --text: #140d02; --muted: #2b2007; --line-rgb: 20, 13, 2;
  --teal: #0b5a4f; --teal-hi: #0b5a4f; --teal-deep: #07382f;
  --scrim: rgba(40, 26, 0, .50); --shadow: 0 16px 40px rgba(70, 45, 0, .30);
}
html[data-theme="vellum"] {
  --gz-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='5' seed='11' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2.6' result='light'%3E%3CfeDistantLight azimuth='42' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer in='light' result='soft'%3E%3CfeFuncR type='linear' slope='0.4' intercept='0.66'/%3E%3CfeFuncG type='linear' slope='0.4' intercept='0.66'/%3E%3CfeFuncB type='linear' slope='0.4' intercept='0.66'/%3E%3C/feComponentTransfer%3E%3CfeBlend mode='multiply' in='SourceGraphic' in2='soft' result='textured'/%3E%3CfeComposite in='textured' in2='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Crect width='320' height='320' fill='%23faefd7' filter='url(%23g)'/%3E%3C/svg%3E");
  --plaster-base: #ede2cc; --bar-base: #e4d8bd; --bar-shade: .04; --glow: rgba(255, 255, 255, .55); --shade: rgba(120, 90, 40, .13);
  --surface: #efe5cf; --surface-2: rgba(255, 252, 243, .55); --surface-3: rgba(255, 252, 243, .78);
  --text: #1d1917; --muted: #51493e; --line-rgb: 29, 25, 23;
  --teal: #1f6f62; --teal-hi: #1f6f62; --teal-deep: #134a42;
  --scrim: rgba(10, 7, 8, .48); --shadow: 0 16px 40px rgba(70, 50, 20, .18);
}
html[data-theme="obsidian"] {
  --gz-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='5' seed='11' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2.6' result='light'%3E%3CfeDistantLight azimuth='42' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer in='light' result='soft'%3E%3CfeFuncR type='linear' slope='1.5' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.5' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.5' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3CfeBlend mode='multiply' in='SourceGraphic' in2='soft' result='textured'/%3E%3CfeComposite in='textured' in2='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Crect width='320' height='320' fill='%23262827' filter='url(%23g)'/%3E%3C/svg%3E");
  --plaster-base: #1c1e1d; --bar-base: #0c0d0d; --bar-shade: .34; --glow: rgba(200, 214, 208, .07); --shade: rgba(0, 0, 0, .58);
  --surface: #141515; --surface-2: rgba(255, 255, 255, .05); --surface-3: rgba(255, 255, 255, .11);
  --text: #f2ede2; --muted: #b8b3aa;
  --teal: #4fc3a6; --teal-hi: #8fe3cc; --teal-deep: #8fe3cc;
  --scrim: rgba(0, 0, 0, .62); --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --gf-a: rgba(74, 68, 56, .95); --gf-b: rgba(24, 26, 26, .88);
}

/* ── accents: Gold or Champagne. The accent colours every metallic part: buttons, headings, eyebrows, lines, focus ring. ── */
html[data-family="dark"][data-accent="gold"] {
  --gold: #E9C474; --gold-hi: #F5DA94; --gold-deep: #9E7A2B; --line-rgb: 232, 197, 106;
  --gold-band: linear-gradient(180deg, #E5BE6A 0%, #C9973A 40%, #96702A 100%);
  --metal: linear-gradient(180deg, #fff0c2 0%, #e8c56a 42%, #c9973a 66%, #f0d990 100%);
}
html[data-family="dark"][data-accent="champagne"] {
  --gold: #D9CCAA; --gold-hi: #FBF3DE; --gold-deep: #B9AB8A; --line-rgb: 217, 204, 170;
  --gold-band: linear-gradient(180deg, #fbf3de 0%, #d9ccaa 52%, #b9ab8a 100%);
  --metal: linear-gradient(180deg, #fbf3de 0%, #d9ccaa 40%, #c2b595 64%, #e6d9b8 100%);
}
/* emerald keeps the champagne heading metal it shipped with when its accent is Gold */
html[data-theme="emerald"][data-accent="gold"] { --metal: linear-gradient(180deg, #fbf3de 0%, #d9ccaa 40%, #c2b595 64%, #e6d9b8 100%); }
/* light themes: gold and champagne cannot be text on a light ground, so the accent text is bronze or umber and the metal is the button band */
html[data-family="light"][data-accent="gold"] {
  --gold: #7a5712; --gold-hi: #5a3f0a; --gold-deep: #3f2c06;
  --gold-band: linear-gradient(180deg, #E5BE6A 0%, #C9973A 40%, #96702A 100%);
  --metal: linear-gradient(180deg, #7a5712 0%, #4a3306 55%, #8a6216 100%);
}
html[data-family="light"][data-accent="champagne"] {
  --gold: #4d4329; --gold-hi: #3a3120; --gold-deep: #2b2417;
  --gold-band: linear-gradient(180deg, #fbf3de 0%, #e3d8b8 50%, #bfb089 100%);
  --metal: linear-gradient(180deg, #5b5037 0%, #3a3223 55%, #625741 100%);
}
html[data-theme="mustard"][data-accent="gold"] {
  --gold: #4a3305; --gold-hi: #3a2704; --gold-deep: #2f1f03;
  --gold-band: linear-gradient(180deg, #fff0b8 0%, #f3d77f 46%, #dcb44a 100%);
  --metal: linear-gradient(180deg, #2a1d05 0%, #140d02 50%, #35260a 100%);
}
html[data-theme="mustard"][data-accent="champagne"] {
  --gold: #3a3120; --gold-hi: #2b2417; --gold-deep: #201a10;
  --metal: linear-gradient(180deg, #2a2210 0%, #140d02 50%, #3a3018 100%);
}
html[data-family="light"] { --state: var(--teal); --state-text: var(--teal-deep); --metal-filter: drop-shadow(0 1px 0 rgba(255, 246, 214, .6)); --ck-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(60, 40, 0, .10); }
html[data-family="dark"] { --state: var(--teal-hi); --state-text: var(--teal-hi); --metal-filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .26)) drop-shadow(0 2px 1px rgba(0, 0, 0, .55)); --ck-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -2px 6px rgba(0, 0, 0, .14); }
html[data-family="dark"] { --line: rgba(var(--line-rgb), .24); --hair: rgba(var(--line-rgb), .42); }
html[data-family="light"] { --line: rgba(var(--line-rgb), .24); --hair: rgba(var(--line-rgb), .36); }

/* ── texture off: the plaster becomes a flat colour, same layout ── */
html[data-theme][data-texture="off"], html[data-theme][data-gfx="lite"] { --gz-tile: none; }   /* two attributes: beats a theme block wherever it is pasted */

/* ── ready-made plaster backgrounds, built from the tokens above ── */
html[data-theme] {
  --ck-canvas: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 38%),
    radial-gradient(130% 90% at 82% -12%, var(--glow), rgba(0, 0, 0, 0) 60%),
    radial-gradient(120% 100% at 50% 125%, var(--shade), rgba(0, 0, 0, 0) 62%),
    var(--gz-tile) 0 0 / 320px 320px repeat, var(--plaster-base);
  --ck-bar: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%),
    linear-gradient(rgba(0, 0, 0, var(--bar-shade)), rgba(0, 0, 0, var(--bar-shade))),
    var(--gz-tile) 0 0 / 320px 320px repeat, var(--bar-base);
}

/* ── the canvas: one fixed static layer behind the page (promoted once, never repainted on scroll); html keeps the flat colour for overscroll ── */
html[data-theme] { background: var(--plaster-base); }
html[data-theme] body { background: transparent; color: var(--text); }
html[data-theme] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ck-canvas); }

/* ── hook classes for apps that want to mark their own markup ── */
.ck-bar { background: var(--ck-bar); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ck-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--ck-panel-shadow); }
.ck-display { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: var(--metal-filter); }
.ck-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 700; color: #1A140C; background: var(--gold-band); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px rgba(0, 0, 0, .25); }

@media (forced-colors: active) {
  .ck-display { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none; }
}