/* ============================================================================
   Tree of Life — theme palettes.
   ----------------------------------------------------------------------------
   Every colour the app uses is a custom property declared here. A theme is one
   `html[data-theme="..."]` block that redefines them; nothing else in the app
   hard-codes a colour, so adding a theme = adding one block below.

   `html[data-art="full|soft|off"]` controls how strongly the botanical
   engravings are drawn (see style.css). The drawings themselves are monochrome
   SVG masks tinted with --art-ink, so they follow the theme automatically.

   Token groups
     surface   --bg --bg-2 --card --card-2 --line --line-soft --shadow
     text      --ink --ink-soft --muted --on-accent
     brand     --accent --accent-dark --accent-tint --gold
     state     --danger --warn --ok
     tree      --male --female --other --unknown + their strokes
     art       --art-ink --art-op --art-op-strong --paper-op
   ========================================================================== */

:root {
    /* --- layout constants, theme independent --- */
    --header-h: 16vh;              /* fixed header = 16% of the screen height */
    --sidebar-w: 236px;
    --radius: 14px;
    --radius-sm: 9px;
    --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                    "Times New Roman", serif;

    /* artwork strength — overridden by [data-art] below */
    --art-op: .16;
    --art-op-strong: .34;
    --paper-op: .05;
}

/* ============================ 1. FOREST (light) ============================
   The heritage identity: living green, warm off-white paper. */
html, html[data-theme="forest"] {
    color-scheme: light;
    --bg: #f3f6f1;          --bg-2: #e8efe6;
    --card: #ffffff;        --card-2: #f7faf6;
    --line: #d3ddd2;        --line-soft: #e5ecE3;
    --shadow: 22, 44, 30;

    --ink: #1e2c23;         --ink-soft: #3b4d42;    --muted: #6c7d72;
    --on-accent: #ffffff;

    --accent: #2f7d52;      --accent-dark: #1e5637;
    --accent-tint: #e4f0e8;  --gold: #a9812f;

    --danger: #b03a26;      --warn: #a97614;        --ok: #2f7d52;

    --male: #d9e7f7;    --male-line: #5b8ac2;
    --female: #f8e2ee;  --female-line: #c25b8f;
    --other: #e9e3fb;   --other-line: #8a6fc2;
    --unknown: #eef1ee; --unknown-line: #9fb2a7;

    /* top bar / chat headers: always dark enough for light text */
    --bar-1: #26694b;        --bar-2: #17452c;        --on-bar: #ffffff;

    --art-ink: #1e5637;
}

/* =========================== 2. PARCHMENT (light) =========================
   Antique manuscript: aged paper, iron-gall brown ink, faded red rubrics. */
html[data-theme="parchment"] {
    color-scheme: light;
    --bg: #f6efe1;          --bg-2: #efe4d0;
    --card: #fffaf0;        --card-2: #f9f2e3;
    --line: #ddcdb2;        --line-soft: #ebdfc9;
    --shadow: 74, 54, 28;

    --ink: #33261a;         --ink-soft: #4f3d2b;    --muted: #7d6b56;
    --on-accent: #fdf7ea;

    --accent: #7a5323;      --accent-dark: #573914;
    --accent-tint: #f0e3cb;  --gold: #9d7a25;

    --danger: #9c3722;      --warn: #97721a;        --ok: #5d7333;

    --male: #e3e0cb;    --male-line: #8a8a5f;
    --female: #f2ddd2;  --female-line: #b5795f;
    --other: #e6dcc6;   --other-line: #97874f;
    --unknown: #f0e8d8; --unknown-line: #b6a488;

    /* top bar / chat headers: always dark enough for light text */
    --bar-1: #6a4620;        --bar-2: #452c11;        --on-bar: #fdf7ea;

    --art-ink: #6b4a20;
}

/* ============================ 3. ORCHARD (light) =========================
   Late-summer orchard: ochre, terracotta, olive. */
html[data-theme="orchard"] {
    color-scheme: light;
    --bg: #faf4ea;          --bg-2: #f3e9d9;
    --card: #ffffff;        --card-2: #fdf7ee;
    --line: #e4d6c0;        --line-soft: #f0e6d6;
    --shadow: 90, 56, 24;

    --ink: #2e2419;         --ink-soft: #4b3a27;    --muted: #86735c;
    --on-accent: #ffffff;

    --accent: #b4622a;      --accent-dark: #8a4518;
    --accent-tint: #f8e5d4;  --gold: #b4892c;

    --danger: #a83a25;      --warn: #a5761a;        --ok: #6a7f2c;

    --male: #dde7ea;    --male-line: #5f8b96;
    --female: #f8ded2;  --female-line: #c47a55;
    --other: #ebe2cd;   --other-line: #9d8c54;
    --unknown: #f2ece1; --unknown-line: #b7a68e;

    /* top bar / chat headers: always dark enough for light text */
    --bar-1: #9a5222;        --bar-2: #6b3512;        --on-bar: #fff6ec;

    --art-ink: #8a4518;
}

/* ============================= 4. BLOOM (light) ==========================
   Botanical plate: rose and plum ink on a cool white, sage supporting. */
html[data-theme="bloom"] {
    color-scheme: light;
    --bg: #faf3f6;          --bg-2: #f3e7ed;
    --card: #ffffff;        --card-2: #fdf7fa;
    --line: #e6d3dc;        --line-soft: #f1e2e9;
    --shadow: 74, 30, 52;

    --ink: #2c1f27;         --ink-soft: #4a3540;    --muted: #826a76;
    --on-accent: #ffffff;

    --accent: #9c3d6b;      --accent-dark: #74264d;
    --accent-tint: #f6e2ec;  --gold: #a67c3c;

    --danger: #b03352;      --warn: #a3761c;        --ok: #4f7f5c;

    --male: #dfe6f6;    --male-line: #6b7fbc;
    --female: #f9dceb;  --female-line: #c05b90;
    --other: #ece0f4;   --other-line: #9070ba;
    --unknown: #f1ebee; --unknown-line: #b3a0aa;

    /* top bar / chat headers: always dark enough for light text */
    --bar-1: #7f3157;        --bar-2: #55193a;        --on-bar: #fdf1f6;

    --art-ink: #74264d;
}

/* ============================= 5. AZURE (light) ==========================
   Cartographer's blue: cool paper, deep marine ink. */
html[data-theme="azure"] {
    color-scheme: light;
    --bg: #eef3f7;          --bg-2: #e2ebf2;
    --card: #ffffff;        --card-2: #f6f9fc;
    --line: #cddbe6;        --line-soft: #e2ebf2;
    --shadow: 20, 44, 68;

    --ink: #172733;         --ink-soft: #32485a;    --muted: #647e91;
    --on-accent: #ffffff;

    --accent: #1f6b8c;      --accent-dark: #144a63;
    --accent-tint: #ddecf4;  --gold: #9b8134;

    --danger: #a63a30;      --warn: #9c7418;        --ok: #257f6d;

    --male: #d6e6f5;    --male-line: #4e83b5;
    --female: #f4dee9;  --female-line: #b96590;
    --other: #e0e2f7;   --other-line: #7276c0;
    --unknown: #e9eef2; --unknown-line: #93a8b6;

    /* top bar / chat headers: always dark enough for light text */
    --bar-1: #1a5c79;        --bar-2: #0e3a4e;        --on-bar: #ffffff;

    --art-ink: #144a63;
}

/* ========================== 6. NIGHTWOOD (dark) ==========================
   The forest after dark: deep pine, moonlit foliage. */
html[data-theme="nightwood"] {
    color-scheme: dark;
    --bg: #121a15;          --bg-2: #17211b;
    --card: #1b2620;        --card-2: #202d26;
    --line: #2f4038;        --line-soft: #263329;
    --shadow: 0, 0, 0;

    --ink: #e6efe8;         --ink-soft: #c4d4c9;    --muted: #8ba396;
    --on-accent: #0f1712;

    --accent: #6cc292;      --accent-dark: #4ea273;
    --accent-tint: #21332a;  --gold: #d3b163;

    --danger: #e5806c;      --warn: #dbb14e;        --ok: #6cc292;

    --male: #24384d;    --male-line: #6f9fd0;
    --female: #45283a;  --female-line: #d385ad;
    --other: #342e4d;   --other-line: #a48ede;
    --unknown: #26302a; --unknown-line: #7d9287;

    /* top bar / chat headers: always dark enough for light text */
    --bar-1: #16211b;        --bar-2: #0d1512;        --on-bar: #dcebe1;

    --art-ink: #8fd9ae;
}

/* =========================== 7. MIDNIGHT (dark) ==========================
   Indigo night sky, violet ink, brass ornament. */
html[data-theme="midnight"] {
    color-scheme: dark;
    --bg: #10131f;          --bg-2: #161a2a;
    --card: #1a1f31;        --card-2: #212739;
    --line: #313a55;        --line-soft: #262d42;
    --shadow: 0, 0, 0;

    --ink: #e7e9f5;         --ink-soft: #c3c8e0;    --muted: #8d94b4;
    --on-accent: #0e1120;

    --accent: #8f9df5;      --accent-dark: #6b7ae0;
    --accent-tint: #232a44;  --gold: #d8b871;

    --danger: #ef8080;      --warn: #dfb659;        --ok: #63c5a8;

    --male: #22334f;    --male-line: #6f9fd0;
    --female: #402743;  --female-line: #cf85c4;
    --other: #2d2a52;   --other-line: #8d86e6;
    --unknown: #232840; --unknown-line: #7e87a8;

    /* top bar / chat headers: always dark enough for light text */
    --bar-1: #181d2f;        --bar-2: #0d1120;        --on-bar: #dfe3f5;

    --art-ink: #a7b2ff;
}

/* ============================= 8. EMBER (dark) ===========================
   Firelight on dark wood: warm charcoal, burgundy, copper. */
html[data-theme="ember"] {
    color-scheme: dark;
    --bg: #191311;          --bg-2: #201817;
    --card: #241b19;        --card-2: #2c211e;
    --line: #40302c;        --line-soft: #332623;
    --shadow: 0, 0, 0;

    --ink: #f2e6e0;         --ink-soft: #d8c5bc;    --muted: #a48d84;
    --on-accent: #1a100d;

    --accent: #e0865a;      --accent-dark: #c06739;
    --accent-tint: #362621;  --gold: #dfae63;

    --danger: #ef7f6b;      --warn: #dcb055;        --ok: #96bd6a;

    --male: #26333f;    --male-line: #7099bd;
    --female: #43262f;  --female-line: #d0819a;
    --other: #372a42;   --other-line: #a084c8;
    --unknown: #2c221f; --unknown-line: #94817a;

    /* top bar / chat headers: always dark enough for light text */
    --bar-1: #241a17;        --bar-2: #150e0c;        --on-bar: #f3e3da;

    --art-ink: #f0a978;
}

/* ======================== artwork intensity levels ======================= */
html[data-art="full"] { --art-op: .18; --art-op-strong: .38; --paper-op: .06; }
html[data-art="soft"] { --art-op: .08; --art-op-strong: .18; --paper-op: .03; }
html[data-art="off"]  { --art-op: 0;   --art-op-strong: 0;   --paper-op: 0; }

/* Dark themes need a touch more artwork to read at all. */
html[data-theme="nightwood"],
html[data-theme="midnight"],
html[data-theme="ember"] { --art-op: .20; --art-op-strong: .40; --paper-op: .05; }
html[data-theme="nightwood"][data-art="soft"],
html[data-theme="midnight"][data-art="soft"],
html[data-theme="ember"][data-art="soft"] { --art-op: .10; --art-op-strong: .20; }
html[data-theme="nightwood"][data-art="off"],
html[data-theme="midnight"][data-art="off"],
html[data-theme="ember"][data-art="off"] { --art-op: 0; --art-op-strong: 0; --paper-op: 0; }

/* Respect the OS "reduce motion" setting: no decorative transitions. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}