/* altpunk v3 skins: one block per family, values lifted from assets/css/family/<code>.css.
   A skin is just a scope: put data-skin="<code>" on ANY element and everything inside re-themes.
   --name-em is the family name's width in em, set in its own display face (feeds .fit-name).
   --accent-lift is the accent to use on a dark surface (only the two paper skins need one). */

[data-skin="apocapunk"] {
  --bg: #14100c;
  --bg-2: #1a1410;
  --panel: #221a12;
  --ink: #cdbca3;
  --ink-dim: #8d7a62;
  --head: #f0e6d6;
  --accent: #e8852a;
  --accent-ink: #14100c;
  --second: #f5c518;
  --alert: #c0392b;
  --line: rgba(232, 133, 42, 0.4);
  --line-soft: rgba(205, 188, 163, 0.16);
  --font-display: 'Space Mono', ui-monospace, monospace;
  --font-body: 'Space Mono', ui-monospace, monospace;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --h-weight: 700;
  --h-track: -0.02em;
  --h-case: uppercase;
  --r: 0px;
  color-scheme: dark;
}

[data-skin="atompunk"] {
  --bg: #13243a;
  --bg-2: #172b45;
  --panel: #1c3352;
  --ink: #d5dde9;
  --ink-dim: #8496ae;
  --head: #f7edd8;
  --accent: #4ec7b8;
  --accent-ink: #0c1929;
  --second: #ef7c33;
  --alert: #cf3c3c;
  --line: rgba(78, 199, 184, 0.4);
  --line-soft: rgba(247, 237, 216, 0.16);
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'Archivo', system-ui, sans-serif;
  --h-weight: 700;
  --h-track: 0.04em;
  --h-case: uppercase;
  --r: 0 22px 0 22px;
  color-scheme: dark;
}

[data-skin="biopunk"] {
  --bg: #08130d;
  --bg-2: #0b1a12;
  --panel: #0f2018;
  --ink: #cfe0d4;
  --ink-dim: #7f9a8b;
  --head: #eaf5ec;
  --accent: #22ff88;
  --accent-ink: #04130a;
  --second: #7b3fb8;
  --alert: #ff8fb8;
  --line: rgba(34, 255, 136, 0.35);
  --line-soft: rgba(123, 63, 184, 0.28);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --h-weight: 300;
  --h-track: 0.01em;
  --h-case: none;
  --r: 18px;
  color-scheme: dark;
}

[data-skin="cyberpunk"] {
  --bg: #05060f;
  --bg-2: #0a0c18;
  --panel: #0d1020;
  --ink: #c9cff0;
  --ink-dim: #6e75a0;
  --head: #eef1ff;
  --accent: #ff2bd6;
  --accent-ink: #05060f;
  --second: #00f0ff;
  --alert: #b8ff2b;
  --line: rgba(0, 240, 255, 0.35);
  --line-soft: rgba(255, 43, 214, 0.22);
  --font-display: 'Chakra Petch', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --h-weight: 700;
  --h-track: -0.01em;
  --h-case: uppercase;
  --r: 0px;
  color-scheme: dark;
}

[data-skin="dieselpunk"] {
  --bg: #15171d;
  --bg-2: #191c23;
  --panel: #20242d;
  --ink: #cfcabb;
  --ink-dim: #8e8a7d;
  --head: #ece4cf;
  --accent: #d2a53c;
  --accent-ink: #15171d;
  --second: #8a3a2c;
  --alert: #6d2424;
  --line: rgba(210, 165, 60, 0.45);
  --line-soft: rgba(210, 165, 60, 0.2);
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'Archivo', system-ui, sans-serif;
  --h-weight: 600;
  --h-track: 0.005em;
  --h-case: uppercase;
  --r: 0px;
  color-scheme: dark;
}

[data-skin="frostpunk"] {
  --bg: #0c1620;
  --bg-2: #101c28;
  --panel: #142434;
  --ink: #b9cbd8;
  --ink-dim: #6c8497;
  --head: #e9f4fa;
  --accent: #9fe6f4;
  --accent-ink: #08131c;
  --second: #ff7a2e;
  --alert: #ff7a2e;
  --line: rgba(159, 230, 244, 0.3);
  --line-soft: rgba(159, 230, 244, 0.13);
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --h-weight: 300;
  --h-track: 0.22em;
  --h-case: uppercase;
  --r: 0px;
  color-scheme: dark;
}

[data-skin="hydropunk"] {
  --bg: #061a26;
  --bg-2: #082230;
  --panel: #0a2a3a;
  --ink: #c2d9e2;
  --ink-dim: #6f93a3;
  --head: #e8f4f8;
  --accent: #4fd1c5;
  --accent-ink: #041820;
  --second: #d9a441;
  --alert: #e2705a;
  --line: rgba(79, 209, 197, 0.3);
  --line-soft: rgba(79, 209, 197, 0.14);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --h-weight: 300;
  --h-track: 0.14em;
  --h-case: uppercase;
  --r: 4px;
  color-scheme: dark;
}

[data-skin="lunapunk"] {
  --bg: #0b0b16;
  --bg-2: #0e0e1c;
  --panel: #121222;
  --ink: #a7a7c0;
  --ink-dim: #6a6a86;
  --head: #e6e3f2;
  --accent: #c9bfe8;
  --accent-ink: #0b0b16;
  --second: #8fb6ff;
  --alert: #d9a7c7;
  --line: rgba(201, 191, 232, 0.16);
  --line-soft: rgba(201, 191, 232, 0.07);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', system-ui, sans-serif;
  --h-weight: 300;
  --h-track: 0em;
  --h-case: lowercase;
  --r: 0px;
  color-scheme: dark;
}

[data-skin="psychopunk"] {
  --bg: #120620;
  --bg-2: #180a2a;
  --panel: #1f0e36;
  --ink: #ddc9f0;
  --ink-dim: #9376b5;
  --head: #fbeeff;
  --accent: #ff2fb3;
  --accent-ink: #12061a;
  --second: #7a2fff;
  --alert: #a8ff3e;
  --line: rgba(255, 47, 179, 0.4);
  --line-soft: rgba(122, 47, 255, 0.3);
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Space Mono', ui-monospace, monospace;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --h-weight: 800;
  --h-track: -0.02em;
  --h-case: none;
  --r: 14px;
  color-scheme: dark;
}

[data-skin="pyropunk"] {
  --bg: #140805;
  --bg-2: #1c0c07;
  --panel: #26110a;
  --ink: #e4cbb8;
  --ink-dim: #9c7460;
  --head: #fff0e2;
  --accent: #ff5a1f;
  --accent-ink: #140805;
  --second: #ffc247;
  --alert: #d4231a;
  --line: rgba(255, 90, 31, 0.42);
  --line-soft: rgba(255, 90, 31, 0.18);
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --h-weight: 400;
  --h-track: -0.005em;
  --h-case: uppercase;
  --r: 0px;
  color-scheme: dark;
}

[data-skin="solarpunk"] {
  --bg: #f3efe0;
  --bg-2: #eae5d2;
  --panel: #fbf8ee;
  --ink: #35402f;
  --ink-dim: #6b7a62;
  --head: #1f2a1c;
  --accent: #3f8b54;
  --accent-ink: #f7fbf2;
  --second: #d99a1f;
  --alert: #c05f3c;
  --line: rgba(63, 139, 84, 0.38);
  --line-soft: rgba(53, 64, 47, 0.16);
  --font-display: 'Quicksand', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, sans-serif;
  --font-mono: 'Quicksand', system-ui, sans-serif;
  --h-weight: 600;
  --h-track: 0.005em;
  --h-case: none;
  --r: 18px;
  color-scheme: light;
}

[data-skin="spacepunk"] {
  --bg: #050a14;
  --bg-2: #08101e;
  --panel: #0a1524;
  --ink: #b8c8dc;
  --ink-dim: #63758f;
  --head: #e4eef8;
  --accent: #ffb347;
  --accent-ink: #050a14;
  --second: #6fc3ff;
  --alert: #ff5f5f;
  --line: rgba(111, 195, 255, 0.3);
  --line-soft: rgba(111, 195, 255, 0.14);
  --font-display: 'IBM Plex Mono', ui-monospace, monospace;
  --font-body: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --h-weight: 500;
  --h-track: 0.2em;
  --h-case: uppercase;
  --r: 0px;
  color-scheme: dark;
}

[data-skin="steampunk"] {
  --bg: #e9dcc0;
  --bg-2: #e2d3b3;
  --panel: #f1e7d1;
  --ink: #3a2d1e;
  --ink-dim: #6d5b42;
  --head: #241b12;
  --accent: #8a5a22;
  --accent-ink: #f4ecd8;
  --second: #6f2a1e;
  --alert: #4a6f5e;
  --line: rgba(58, 45, 30, 0.55);
  --line-soft: rgba(58, 45, 30, 0.22);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'Cormorant Garamond', Georgia, serif;
  --h-weight: 700;
  --h-track: 0.01em;
  --h-case: none;
  --r: 0px;
  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Treatments: the "axis of difference" of each identity, as tokens.
   Components never branch on a family name; they read these.
   --------------------------------------------------------------------------- */

/* Cyberpunk "Signal Bleed": corner cuts, chromatic split, scanlines. */
[data-skin="cyberpunk"] {
  --shape: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  --shape-sm: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  --r-pill: 0;
  --h-shadow: -2px 0 var(--accent), 2px 0 var(--second);
  --marker-r: 0; --marker-rot: 45deg;
  --img-filter: contrast(1.25) saturate(1.6) hue-rotate(-12deg) brightness(.8);
  --veil:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .3) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgb(255 43 214 / .07) 63px 64px);
  --hover-anim: glitch-text;
  --codename: "Signal Bleed";
}

/* Steampunk "Engraved Folio": paper, centred axis, double rules, drop cap. */
[data-skin="steampunk"] {
  --align: center;
  --justify: center;
  --mi: auto;
  --accent-lift: #c99a5b;
  --frame-border: 4px double var(--line);
  --r-pill: 0;
  --dropcap-float: left;
  --dropcap-size: 4.2em;
  --h-shadow: none;
  --marker-r: 50%;
  --img-filter: sepia(.55) contrast(1.05) saturate(.8);
  --veil:
    repeating-linear-gradient(45deg, rgb(58 45 30 / .045) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgb(80 55 25 / .18));
  --glow: none;
  --codename: "The Engraved Folio";
}

/* Solarpunk "Seed Almanac": arched frames, soft radius, woven fibre. */
[data-skin="solarpunk"] {
  --accent-lift: #6fcf86;
  --r-frame: 999px 999px var(--r) var(--r) / 420px 420px var(--r) var(--r);
  --h-shadow: none;
  --marker-r: 50%;
  --img-filter: saturate(1.1) brightness(1.04);
  --veil:
    repeating-linear-gradient(0deg, rgb(63 139 84 / .04) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgb(217 154 31 / .04) 0 2px, transparent 2px 7px);
  --glow: none;
  --codename: "Seed Almanac";
}

/* Frostpunk "The Edict": shards, tracked condensed caps, one rationed ember. */
[data-skin="frostpunk"] {
  --shape: polygon(0 10px, 22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 10px) 100%, 0 100%);
  --shape-sm: polygon(0 6px, 10px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 10px) 100%, 0 100%);
  --r-pill: 0;
  --h-shadow: 0 0 22px rgb(159 230 244 / .35);
  --marker-r: 0; --marker-rot: 45deg;
  --img-filter: saturate(.55) brightness(.85) hue-rotate(10deg);
  --veil:
    radial-gradient(circle at 15% 10%, rgb(210 243 250 / .10), transparent 35%),
    radial-gradient(circle at 85% 90%, rgb(255 122 46 / .08), transparent 40%);
  --codename: "The Edict";
}

/* Square skins keep small radii square too. */
[data-skin="apocapunk"], [data-skin="cyberpunk"], [data-skin="dieselpunk"], [data-skin="frostpunk"], [data-skin="lunapunk"],
[data-skin="pyropunk"], [data-skin="spacepunk"], [data-skin="steampunk"] { --r-sm: 0px; }

/* Lighter-touch treatments for the other nine. */
[data-skin="dieselpunk"] { --r-pill: 0; --codename: "Ministry Poster"; --img-filter: grayscale(.4) contrast(1.15); }
[data-skin="biopunk"]    { --h-shadow: 0 0 18px rgb(34 255 136 / .35); --codename: "Wet Lab"; }
[data-skin="hydropunk"]  { --codename: "Admiralty Chart"; --img-filter: saturate(.8) hue-rotate(-8deg); }
[data-skin="atompunk"]   { --codename: "Googie Broadcast"; --marker-r: 50%; }
[data-skin="spacepunk"]  { --r-pill: 0; --codename: "Instrument Readout"; }
[data-skin="lunapunk"]   { --h-shadow: 0 0 30px rgb(201 191 232 / .3); --codename: "Ephemeris"; --img-filter: saturate(.6) brightness(.9); }
[data-skin="pyropunk"]   { --r-pill: 0; --h-shadow: 0 0 26px rgb(255 90 31 / .45); --codename: "The Forge"; }
[data-skin="apocapunk"]  { --r-pill: 0; --codename: "Salvage Log"; --img-filter: sepia(.3) contrast(1.15); }
[data-skin="psychopunk"] { --h-shadow: 3px 3px 0 var(--second); --codename: "Sensorium"; }

/* Family name widths in em, measured in each display face at its skin's weight, tracking and case
   (Chrome, fonts.css). Re-measure if a skin's typeface or tracking changes; see README. */
[data-skin="apocapunk"] { --name-em: 5.33; }
[data-skin="atompunk"] { --name-em: 6.15; }
[data-skin="biopunk"] { --name-em: 3.98; }
[data-skin="cyberpunk"] { --name-em: 5.82; }
[data-skin="dieselpunk"] { --name-em: 4.96; }
[data-skin="frostpunk"] { --name-em: 6.29; }
[data-skin="hydropunk"] { --name-em: 7.31; }
[data-skin="lunapunk"] { --name-em: 3.69; }
[data-skin="psychopunk"] { --name-em: 9.69; }
[data-skin="pyropunk"] { --name-em: 3.76; }
[data-skin="solarpunk"] { --name-em: 4.89; }
[data-skin="spacepunk"] { --name-em: 7.2; }
[data-skin="steampunk"] { --name-em: 5.35; }