/* Amadeuz theme master — v27 corrected palette system
   Philosophy: one true source hue per visual family. Component fills, outlines, text,
   hover states and glows are transformations of those hues, never independent pigments. */

:root,
:root[data-theme="amadeuz"] {
  color-scheme: dark;
  /* 10 source colors */
  --theme-bg: #030408;
  --theme-fg: #f6f8ff;
  --hue-action: #67d8ff;
  --hue-danger: #ff4c60;
  --hue-female: hsl(324 58% 74%);
  --hue-nonbinary: hsl(258 48% 76%);
  --hue-gradient-violet: #9968ff;
  --hue-gradient-pink: #ff3ecf;
  --hue-success: #83ffd2;
  --hue-warning: #f7c948;

  --shadow-base: var(--theme-bg);

  /* Neutral ladder. A tiny cool bias in app surfaces reproduces the original logged-in charcoal. */
  --app-page-bg: color-mix(in srgb, var(--hue-action) 1%, color-mix(in srgb, var(--theme-fg) .5%, var(--theme-bg)));
  --ui-surface-1: color-mix(in srgb, var(--theme-fg) 1.7%, var(--app-page-bg));
  --ui-surface-2: color-mix(in srgb, var(--theme-fg) 3.2%, var(--app-page-bg));
  --ui-surface-3: color-mix(in srgb, var(--theme-fg) 5.2%, var(--app-page-bg));
  --ui-surface-4: color-mix(in srgb, var(--theme-fg) 8%, var(--app-page-bg));
  --surface-panel: color-mix(in srgb, var(--theme-fg) 5%, var(--theme-bg));
  --surface-panel-strong: color-mix(in srgb, var(--theme-fg) 8%, var(--theme-bg));
  --surface-contrast-soft: color-mix(in srgb, var(--theme-fg) 10%, var(--theme-bg));

  --text: var(--theme-fg);
  --text-soft: color-mix(in srgb, var(--theme-fg) 86%, var(--theme-bg));
  --text-muted: color-mix(in srgb, var(--theme-fg) 68%, var(--theme-bg));
  --text-dim: color-mix(in srgb, var(--theme-fg) 48%, var(--theme-bg));
  --muted: var(--text-muted);
  --dim: var(--text-dim);

  --neutral-fill-faint: color-mix(in srgb, var(--theme-fg) 2.5%, transparent);
  --neutral-fill: color-mix(in srgb, var(--theme-fg) 4.5%, transparent);
  --neutral-fill-strong: color-mix(in srgb, var(--theme-fg) 7.5%, transparent);
  --neutral-fill-heavy: color-mix(in srgb, var(--theme-fg) 12%, transparent);
  --neutral-glass: color-mix(in srgb, var(--theme-fg) 8%, transparent);
  --card-glass: color-mix(in srgb, var(--app-page-bg) 68%, transparent);
  --dark-glass-faint: color-mix(in srgb, var(--theme-bg) 22%, transparent);
  --dark-glass: color-mix(in srgb, var(--theme-bg) 52%, transparent);
  --dark-glass-strong: color-mix(in srgb, var(--theme-bg) 76%, transparent);

  --line-faint: color-mix(in srgb, var(--theme-fg) 5%, transparent);
  --line-soft: color-mix(in srgb, var(--theme-fg) 9%, transparent);
  --ui-line-soft: var(--line-soft);
  --ui-line: color-mix(in srgb, var(--theme-fg) 13%, transparent);
  --line: var(--ui-line);
  --line-strong: color-mix(in srgb, var(--theme-fg) 24%, transparent);

  --shadow-soft: color-mix(in srgb, var(--shadow-base) 30%, transparent);
  --shadow-strong: color-mix(in srgb, var(--shadow-base) 55%, transparent);
  --shadow-raised: 0 18px 54px var(--shadow-soft);
  --shadow-elevated: 0 28px 90px var(--shadow-strong);

  /* Companion cards use the same cool neutral family as the page, only slightly lifted. */
  --companion-card-bg: color-mix(in srgb, var(--theme-fg) .7%, color-mix(in srgb, var(--hue-action) .18%, var(--app-page-bg)));
  --companion-card-border: color-mix(in srgb, var(--theme-fg) 5.5%, transparent);
  --companion-card-shadow: color-mix(in srgb, var(--shadow-base) 46%, transparent);

  /* One hue -> blended fill -> outline -> readable text. */
  --action-fill: color-mix(in srgb, var(--hue-action) 8%, transparent);
  --action-fill-strong: color-mix(in srgb, var(--hue-action) 17%, var(--theme-bg));
  --action-fill-hover: color-mix(in srgb, var(--hue-action) 24%, var(--theme-bg));
  --action-border-soft: color-mix(in srgb, var(--hue-action) 28%, transparent);
  --action-border: color-mix(in srgb, var(--hue-action) 56%, transparent);
  --action-text: color-mix(in srgb, var(--hue-action) 58%, var(--theme-fg));
  --action-pill-text: color-mix(in srgb, var(--hue-action) 32%, var(--theme-fg));
  --action-button-text: color-mix(in srgb, var(--hue-action) 30%, var(--theme-fg));
  --action-glow: color-mix(in srgb, var(--hue-action) 17%, transparent);

  --danger-fill: color-mix(in srgb, var(--hue-danger) 13%, transparent);
  --danger-fill-strong: color-mix(in srgb, var(--hue-danger) 22%, var(--theme-bg));
  --danger-border-soft: color-mix(in srgb, var(--hue-danger) 32%, transparent);
  --danger-border: color-mix(in srgb, var(--hue-danger) 72%, transparent);
  --danger-text: color-mix(in srgb, var(--hue-danger) 50%, var(--theme-fg));
  --danger-pill-text: color-mix(in srgb, var(--hue-danger) 34%, var(--theme-fg));
  --danger-glow: color-mix(in srgb, var(--hue-danger) 12%, transparent);

  --female-fill: color-mix(in srgb, var(--hue-female) 12%, transparent);
  --female-fill-strong: color-mix(in srgb, var(--hue-female) 20%, var(--theme-bg));
  --female-border-soft: color-mix(in srgb, var(--hue-female) 24%, transparent);
  --female-border: color-mix(in srgb, var(--hue-female) 38%, transparent);
  --female-text: color-mix(in srgb, var(--hue-female) 46%, var(--theme-fg));
  --female-pill-text: color-mix(in srgb, var(--hue-female) 30%, var(--theme-fg));
  --female-glow: color-mix(in srgb, var(--hue-female) 14%, transparent);
  /* Description text intentionally stays close to the foreground for contrast:
     light themes receive a dark tint; dark themes receive a light tint. */
  --companion-description-female: color-mix(in srgb, var(--hue-female) 30%, var(--theme-fg));

  --nonbinary-fill: color-mix(in srgb, var(--hue-nonbinary) 14%, transparent);
  --nonbinary-fill-strong: color-mix(in srgb, var(--hue-nonbinary) 22%, var(--theme-bg));
  --nonbinary-border-soft: color-mix(in srgb, var(--hue-nonbinary) 26%, transparent);
  --nonbinary-border: color-mix(in srgb, var(--hue-nonbinary) 40%, transparent);
  --nonbinary-text: color-mix(in srgb, var(--hue-nonbinary) 44%, var(--theme-fg));
  --nonbinary-pill-text: color-mix(in srgb, var(--hue-nonbinary) 30%, var(--theme-fg));
  --nonbinary-glow: color-mix(in srgb, var(--hue-nonbinary) 14%, transparent);
  --companion-description-nonbinary: color-mix(in srgb, var(--hue-nonbinary) 30%, var(--theme-fg));
  --companion-description-male: color-mix(in srgb, var(--hue-action) 30%, var(--theme-fg));
  --companion-description-neutral: var(--text-muted);

  --violet-fill: color-mix(in srgb, var(--hue-gradient-violet) 12%, transparent);
  --violet-fill-strong: color-mix(in srgb, var(--hue-gradient-violet) 20%, var(--theme-bg));
  --violet-border-soft: color-mix(in srgb, var(--hue-gradient-violet) 25%, transparent);
  --violet-border: color-mix(in srgb, var(--hue-gradient-violet) 48%, transparent);
  --violet-text: color-mix(in srgb, var(--hue-gradient-violet) 54%, var(--theme-fg));
  --violet-glow: color-mix(in srgb, var(--hue-gradient-violet) 16%, transparent);

  --pink-fill: color-mix(in srgb, var(--hue-gradient-pink) 11%, transparent);
  --pink-fill-strong: color-mix(in srgb, var(--hue-gradient-pink) 19%, var(--theme-bg));
  --pink-border-soft: color-mix(in srgb, var(--hue-gradient-pink) 24%, transparent);
  --pink-border: color-mix(in srgb, var(--hue-gradient-pink) 48%, transparent);
  --pink-text: color-mix(in srgb, var(--hue-gradient-pink) 52%, var(--theme-fg));
  --pink-glow: color-mix(in srgb, var(--hue-gradient-pink) 16%, transparent);

  --success-fill: color-mix(in srgb, var(--hue-success) 10%, transparent);
  --success-fill-strong: color-mix(in srgb, var(--hue-success) 18%, var(--theme-bg));
  --success-border-soft: color-mix(in srgb, var(--hue-success) 24%, transparent);
  --success-border: color-mix(in srgb, var(--hue-success) 46%, transparent);
  --success-text: color-mix(in srgb, var(--hue-success) 52%, var(--theme-fg));
  --success-glow: color-mix(in srgb, var(--hue-success) 15%, transparent);

  --warning-fill: color-mix(in srgb, var(--hue-warning) 10%, transparent);
  --warning-fill-strong: color-mix(in srgb, var(--hue-warning) 18%, var(--theme-bg));
  --warning-border-soft: color-mix(in srgb, var(--hue-warning) 24%, transparent);
  --warning-border: color-mix(in srgb, var(--hue-warning) 48%, transparent);
  --warning-text: color-mix(in srgb, var(--hue-warning) 58%, var(--theme-fg));
  --warning-glow: color-mix(in srgb, var(--hue-warning) 14%, transparent);

  /* Rating states derive from the warning hue and neutral foreground. */
  --rating-full: var(--warning-text);
  --rating-wash: color-mix(in srgb, var(--hue-warning) 36%, var(--theme-bg));
  --rating-empty-outline: color-mix(in srgb, var(--theme-fg) 26%, transparent);
  --rating-unrated: var(--text-dim);
  --scrollbar-thumb: var(--text-muted);
  --scrollbar-thumb-hover: var(--text-soft);

  --tag-neutral-fill: var(--neutral-fill);
  --tag-neutral-border: var(--ui-line);
  --tag-neutral-text: var(--text-muted);
  --accent: var(--hue-action);
  --accent-2: var(--hue-gradient-pink);
  --page-bg: var(--theme-bg);

  /* Preserved Amadeuz gradient recipes. */
  --gradient: linear-gradient(135deg, var(--hue-action), var(--hue-gradient-pink));
  --gradient-soft: linear-gradient(135deg, var(--action-fill), var(--pink-fill));
  --gradient-menu-outline: linear-gradient(145deg, color-mix(in srgb, var(--hue-action) 60%, transparent), color-mix(in srgb, var(--hue-gradient-violet) 32%, transparent) 48%, color-mix(in srgb, var(--hue-gradient-pink) 58%, transparent));
  --gradient-outline: linear-gradient(120deg, color-mix(in srgb, var(--hue-action) 64%, transparent), color-mix(in srgb, var(--hue-gradient-violet) 30%, transparent) 48%, color-mix(in srgb, var(--hue-gradient-pink) 62%, transparent));
  --gradient-outline-soft: linear-gradient(120deg, color-mix(in srgb, var(--hue-action) 58%, transparent), color-mix(in srgb, var(--hue-gradient-violet) 28%, transparent) 50%, color-mix(in srgb, var(--hue-gradient-pink) 58%, transparent));

  /* Legacy aliases are references only, not source pigments. */
  --panel: var(--surface-panel); --panel-strong: var(--surface-panel-strong);
  --pink: var(--hue-gradient-pink); --blue: var(--hue-action); --violet: var(--hue-gradient-violet);
  --good: var(--hue-success); --danger: var(--hue-danger);
  --action-blue: var(--action-text); --action-blue-bg: var(--action-fill-strong); --action-blue-bg-hover: var(--action-fill-hover);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #000000;
  --theme-fg: #ffffff;
  --shadow-base: var(--theme-bg);
  --app-page-bg: var(--theme-bg); /* explicit requirement: absolute black */
}

:root[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #fcfcfc;
  --theme-fg: #17181d;
  --hue-action: #007fa8;
  --hue-danger: #b9253d;
  --hue-female: #a83c7b;
  --hue-nonbinary: #694da8;
  --hue-gradient-violet: #7047d9;
  --hue-gradient-pink: #c52a9f;
  --hue-success: #17765c;
  --hue-warning: #8a6507;
  --shadow-base: var(--theme-fg);
  --app-page-bg: color-mix(in srgb, var(--theme-fg) .6%, var(--theme-bg));
  --companion-card-bg: var(--theme-bg);
  --companion-card-shadow: color-mix(in srgb, var(--shadow-base) 20%, transparent);
}

:root[data-theme="pastel-pink"] {
  color-scheme: light;
  --theme-bg: #fff5fa;
  --theme-fg: #3a2833;
  --hue-action: #7f73bb;
  --hue-danger: #c84f70;
  --hue-female: #d977aa;
  --hue-nonbinary: #8d78bf;
  --hue-gradient-violet: #aa89db;
  --hue-gradient-pink: #e780ba;
  --hue-success: #4f8f77;
  --hue-warning: #a97838;
  --shadow-base: var(--theme-fg);
  --app-page-bg: color-mix(in srgb, var(--hue-gradient-pink) 2%, var(--theme-bg));
  --companion-card-bg: var(--theme-bg);
  --companion-card-shadow: color-mix(in srgb, var(--shadow-base) 18%, transparent);

  /* Pastel keeps the soft canvas but uses firmer pill/action chroma for legibility. */
  --action-fill-strong: color-mix(in srgb, var(--hue-action) 27%, var(--theme-bg));
  --action-fill-hover: color-mix(in srgb, var(--hue-action) 34%, var(--theme-bg));
  --action-border: color-mix(in srgb, var(--hue-action) 72%, transparent);
  --female-fill: color-mix(in srgb, var(--hue-female) 22%, transparent);
  --female-border: color-mix(in srgb, var(--hue-female) 62%, transparent);
  --nonbinary-fill: color-mix(in srgb, var(--hue-nonbinary) 22%, transparent);
  --nonbinary-border: color-mix(in srgb, var(--hue-nonbinary) 62%, transparent);
  --danger-fill-strong: color-mix(in srgb, var(--hue-danger) 31%, var(--theme-bg));
  --danger-border: color-mix(in srgb, var(--hue-danger) 82%, transparent);
  --scrollbar-thumb: var(--action-text);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--hue-action) 42%, var(--theme-fg));
}

/* Theme picker previews: these four small swatches are the only display copies of source colors. */
.theme-choice[data-theme-option="amadeuz"] { --preview-bg:#030408; --preview-fg:#f6f8ff; --preview-action:#67d8ff; --preview-accent:#ff3ecf; }
.theme-choice[data-theme-option="dark"] { --preview-bg:#000000; --preview-fg:#ffffff; --preview-action:#67d8ff; --preview-accent:#ff3ecf; }
.theme-choice[data-theme-option="light"] { --preview-bg:#fcfcfc; --preview-fg:#17181d; --preview-action:#007fa8; --preview-accent:#c52a9f; }
.theme-choice[data-theme-option="pastel-pink"] { --preview-bg:#fff5fa; --preview-fg:#3a2833; --preview-action:#7f73bb; --preview-accent:#e780ba; }