/* ─────────────────────────────────────────────────────────────────────────────
 * WYN — the theme catalogue.
 *
 * Twelve themes across two schemes. Every one keeps the same STRUCTURE — glass
 * panels floating over a neumorphic base — and changes only the palette, so the
 * product never stops feeling like one product.
 *
 * Each theme declares:
 *   --wyn-bg / --wyn-base      the page and the neumorphic surface it extrudes from
 *   --wyn-fg / --wyn-fg-muted  text
 *   --wyn-accent               the ONE colour: active nav, primary buttons, focus
 *                              rings, stat rings, the live dot, the caret, links
 *   --neu-lo / --neu-hi        the two shadows that make neumorphism work
 *   --glass*                   translucency, edges and the sheen along a top edge
 *   --el-* / --co-*            the logo elephant and the white companion
 *
 * The monochrome pair (Noir, Paper) set --wyn-accent to plain fg, which is how
 * the black-and-white look survives alongside the colour themes.
 *
 *
 * ───────────────────────────────────────────────────────────────────────────── */

/* ══ shared, scheme-level defaults ═════════════════════════════════════════ */
:root[data-wyn-scheme="dark"] {
  --neu-lo: rgba(0, 0, 0, 0.7);
  --neu-hi: rgba(255, 255, 255, 0.055);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-edge: rgba(255, 255, 255, 0.11);
  --glass-sheen: rgba(255, 255, 255, 0.18);
  --accent-fg: #0b0b0d;

  --el-skin: #c9c9d0; --el-hi: #ffffff; --el-ear: #a5a5ad; --el-ear-hi: #d3d3d9;
  --el-ear-in: rgba(0,0,0,.16); --el-eye: #17171a; --el-tusk: #ffffff;
  --el-line: #7d7d86; --el-shadow: rgba(0,0,0,.55); --el-joy: #ffffff;
  --el-pink: #f0adbc; --el-pink-hi: #fbd8de; --el-toe: #f6f0e6;
  --el-tongue: #ec6f86; --el-mouth: #6d5a5f; --el-skin-lo: #9a9aa2;

  --co-body: #f6f6f8; --co-hi: #ffffff; --co-shade: #cfcfd8;
  --co-inner: #e4e4ea; --co-inner-lo: #c2c2cd; --co-line: #a9a9b4;
  --co-eye: #15151a; --co-drop: rgba(0,0,0,.5); --co-edge: rgba(70,70,85,.55);
}
:root[data-wyn-scheme="light"] {
  --neu-lo: rgba(0, 0, 0, 0.13);
  --neu-hi: rgba(255, 255, 255, 1);
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.92);
  --glass-sheen: rgba(255, 255, 255, 1);
  --accent-fg: #ffffff;

  --el-skin: #b6b6bf; --el-hi: #ffffff; --el-ear: #96969f; --el-ear-hi: #c6c6ce;
  --el-ear-in: rgba(0,0,0,.13); --el-eye: #17171a; --el-tusk: #ffffff;
  --el-line: #70707a; --el-shadow: rgba(0,0,0,.2); --el-joy: #17171a;
  --el-pink: #f0adbc; --el-pink-hi: #fbd8de; --el-toe: #f6f0e6;
  --el-tongue: #ec6f86; --el-mouth: #6d5a5f; --el-skin-lo: #9a9aa2;

  --co-body: #ffffff; --co-hi: #ffffff; --co-shade: #c4c4ce;
  --co-inner: #e0e0e8; --co-inner-lo: #b6b6c2; --co-line: #9d9da8;
  --co-eye: #17171b; --co-drop: rgba(0,0,0,.22); --co-edge: rgba(120,120,138,.7);
}

/* ══ DARK ══════════════════════════════════════════════════════════════════ */

/* Noir — the monochrome original. No colour at all. */
:root[data-wyn-theme="noir"] {
  --wyn-bg: #0e0e10; --wyn-base: #131316; --wyn-bg-elevated: #1a1a1e;
  --wyn-fg: #f4f4f5; --wyn-fg-muted: #9b9ba2;
  --wyn-accent: #ffffff; --wyn-accent-soft: rgba(255,255,255,.13);
  --accent-fg: #0b0b0d;
}
/* Graphite — monochrome, lifted a stop. */
:root[data-wyn-theme="graphite"] {
  --wyn-bg: #1c1c20; --wyn-base: #232328; --wyn-bg-elevated: #2b2b31;
  --wyn-fg: #f2f2f4; --wyn-fg-muted: #a3a3ac;
  --wyn-accent: #ffffff; --wyn-accent-soft: rgba(255,255,255,.14);
  --accent-fg: #17171a;
  --neu-lo: rgba(0,0,0,.55); --neu-hi: rgba(255,255,255,.07);
}
/* Indigo */
:root[data-wyn-theme="indigo"] {
  --wyn-bg: #0c0d18; --wyn-base: #121422; --wyn-bg-elevated: #191c2e;
  --wyn-fg: #eceef8; --wyn-fg-muted: #9095b4;
  --wyn-accent: #7c8cff; --wyn-accent-soft: rgba(124,140,255,.18);
  --accent-fg: #0a0b14;
}
/* Emerald */
:root[data-wyn-theme="emerald"] {
  --wyn-bg: #07120f; --wyn-base: #0d1a16; --wyn-bg-elevated: #12241e;
  --wyn-fg: #e8f3ee; --wyn-fg-muted: #86a396;
  --wyn-accent: #3fd8a0; --wyn-accent-soft: rgba(63,216,160,.16);
  --accent-fg: #05130d;
}
/* Ember */
:root[data-wyn-theme="ember"] {
  --wyn-bg: #140d09; --wyn-base: #1c130d; --wyn-bg-elevated: #261a12;
  --wyn-fg: #f6ece3; --wyn-fg-muted: #b2988a;
  --wyn-accent: #ff9d4d; --wyn-accent-soft: rgba(255,157,77,.17);
  --accent-fg: #180d05;
}
/* Rose */
:root[data-wyn-theme="rose"] {
  --wyn-bg: #150a10; --wyn-base: #1d0f18; --wyn-bg-elevated: #281521;
  --wyn-fg: #f7e9f1; --wyn-fg-muted: #b391a5;
  --wyn-accent: #ff7eb6; --wyn-accent-soft: rgba(255,126,182,.17);
  --accent-fg: #1a0710;
}
/* Ocean */
:root[data-wyn-theme="ocean"] {
  --wyn-bg: #06121a; --wyn-base: #0b1b26; --wyn-bg-elevated: #102532;
  --wyn-fg: #e6f2f8; --wyn-fg-muted: #86a4b4;
  --wyn-accent: #45c8f0; --wyn-accent-soft: rgba(69,200,240,.16);
  --accent-fg: #041018;
}
/* Violet */
:root[data-wyn-theme="violet"] {
  --wyn-bg: #110b18; --wyn-base: #191024; --wyn-bg-elevated: #221731;
  --wyn-fg: #f0eaf8; --wyn-fg-muted: #a292b8;
  --wyn-accent: #b98cff; --wyn-accent-soft: rgba(185,140,255,.18);
  --accent-fg: #120a1c;
}

/* ══ LIGHT ═════════════════════════════════════════════════════════════════ */

/* Paper — the monochrome light original. */
:root[data-wyn-theme="paper"] {
  --wyn-bg: #f5f5f6; --wyn-base: #fafafb; --wyn-bg-elevated: #ffffff;
  --wyn-fg: #0d0d0f; --wyn-fg-muted: #71717a;
  --wyn-accent: #17171b; --wyn-accent-soft: rgba(0,0,0,.07);
  --accent-fg: #ffffff;
}
/* Bone — monochrome, a shade warmer and dimmer. */
:root[data-wyn-theme="bone"] {
  --wyn-bg: #e6e5e1; --wyn-base: #eceae5; --wyn-bg-elevated: #f5f4f0;
  --wyn-fg: #1b1a17; --wyn-fg-muted: #6d6b64;
  --wyn-accent: #1b1a17; --wyn-accent-soft: rgba(0,0,0,.07);
  --accent-fg: #f5f4f0;
  --neu-lo: rgba(0,0,0,.15);
}
/* Porcelain */
:root[data-wyn-theme="porcelain"] {
  --wyn-bg: #eef1f6; --wyn-base: #f5f7fa; --wyn-bg-elevated: #ffffff;
  --wyn-fg: #10151f; --wyn-fg-muted: #667089;
  --wyn-accent: #3563e9; --wyn-accent-soft: rgba(53,99,233,.11);
  --accent-fg: #ffffff;
}
/* Sand */
:root[data-wyn-theme="sand"] {
  --wyn-bg: #f4efe6; --wyn-base: #faf6ef; --wyn-bg-elevated: #fffdf9;
  --wyn-fg: #1e1810; --wyn-fg-muted: #7d7263;
  --wyn-accent: #c07a2c; --wyn-accent-soft: rgba(192,122,44,.13);
  --accent-fg: #ffffff;
}
/* Mint */
:root[data-wyn-theme="mint"] {
  --wyn-bg: #eaf3ee; --wyn-base: #f2f8f4; --wyn-bg-elevated: #ffffff;
  --wyn-fg: #0e1a14; --wyn-fg-muted: #61796c;
  --wyn-accent: #0f9d6b; --wyn-accent-soft: rgba(15,157,107,.12);
  --accent-fg: #ffffff;
}

/* ══ derived tokens every component reads ══════════════════════════════════ */
:root {
  --wyn-surface: var(--glass);
  --wyn-border: color-mix(in srgb, var(--wyn-fg) 12%, transparent);
  /* kept for the aurora field and anything still reading the older names */
  --wyn-primary: var(--wyn-accent);
  --wyn-primary-strong: var(--wyn-accent);
  --wyn-success: var(--wyn-accent);
  --wyn-warning: var(--wyn-fg-muted);
  --wyn-danger: var(--wyn-accent);
  --wyn-gradient: linear-gradient(135deg, var(--wyn-accent), color-mix(in srgb, var(--wyn-accent) 55%, var(--wyn-fg)));
}