/* ============================================================================
   BelCanto — colour layer.
   PALETA ZE ZNAKU: wartosci blue-600/800, sky, sky-soft i gold zmierzone
   z wektorowego pliku logotypu (P-30). Przy nastepnym eksporcie z Claude
   Design trzeba je odtworzyc — patrz lista poprawek w CLAUDE.md.
   The ONLY file in this design system that contains a literal colour value.
   Components and screens must reference `--color-*` roles exclusively.

   Structure
   1. Palette   — raw brand values, theme-independent (`--palette-*`).
                  Never use these directly in a component.
   2. Roles     — every colour decision the UI can make, named by ROLE
                  (`--color-surface`, `--color-text-primary`, …).
                  Each theme redefines the same complete role list.

   Adding a third theme = append one block:

       [data-theme="sepia"] { … the same role list, different values … }

   No component, screen or template needs to change: the theme is selected by
   the `data-theme` attribute on <html>, and ThemeToggle cycles whatever list
   of theme ids it is given.

   Contrast: every text role is checked against its intended background for
   WCAG 2.1 AA (4.5:1 body text). See readme.md § CONTRAST for the audit table.
   ============================================================================ */

:root{
  /* ── 1. PALETTE (theme-independent raw values) ───────────────────────────── */
  --palette-blue-50:#eef6fb;
  --palette-blue-100:#daeaf5;
  --palette-blue-200:#b6d5ea;
  --palette-blue-300:#7fb6d6;
  --palette-blue-400:#4a95bf;
  --palette-blue-500:#1c6f9f;
  --palette-blue-600:#155884;   /* blekit ze znaku (P-30) */
  --palette-blue-700:#114f76;
  --palette-blue-800:#0d4665;   /* granat ze znaku (P-30) */
  --palette-blue-900:#0a3650;
  --palette-blue-950:#072534;   /* najciemniejszy ton, do motywu nocnego */
  --palette-sky:#03a5d8;        /* cyjan z „Bel" (P-30) */
  --palette-sky-soft:#a6dff1;   /* lod (P-30) */
  --palette-gold:#ba8917;       /* dziob (P-30) */
  --palette-gold-soft:#f6e3b4;
  --palette-clay:#c0483a;
  --palette-white:#ffffff;
  --palette-ink-50:#f4f7f9;
  --palette-ink-100:#e9edf1;
  --palette-ink-200:#d6dce3;
  --palette-ink-300:#a9b3be;
  --palette-ink-400:#7c8896;
  --palette-ink-500:#5e6b7a;
  --palette-ink-600:#4a5765;
  --palette-ink-700:#33404e;
  --palette-ink-800:#1b2733;
  --palette-ink-900:#0f1a26;
  --palette-ink-950:#0a1420;
  /* dark-mode-safe status hues */
  --palette-green-400:#6cc79c;
  --palette-green-700:#2f7d5d;
  --palette-amber-400:#e8b64a;
  --palette-amber-800:#8a6008;
  --palette-red-400:#f08b7d;
  --palette-red-700:#b23b2c;
}

/* ── 2a. ROLES — light ──────────────────────────────────────────────────────
   :root carries the light theme so a page without data-theme still renders. */
:root,
[data-theme="light"]{
  color-scheme:light;

  /* surfaces */
  --color-surface:var(--palette-white);
  --color-surface-sunken:var(--palette-ink-50);
  --color-surface-elevated:var(--palette-white);   /* cards */
  --color-surface-floating:var(--palette-white);   /* dialogs, toasts, popovers */
  --color-surface-inverse:var(--palette-blue-800); /* granat ze znaku */
  --color-surface-band:var(--palette-blue-800);    /* full-width navy section */
  --color-surface-tint:var(--palette-blue-50);     /* tlo strony w odcieniu znaku */
  --color-surface-tint-strong:var(--palette-blue-100);
  --color-surface-glass:rgba(255,255,255,.72);     /* sticky header */
  --color-overlay:rgba(7,27,43,.52);               /* modal scrim */
  --color-photo-tint:rgba(12,43,65,.06);

  /* text */
  --color-text-primary:var(--palette-blue-800);
  --color-text-body:var(--palette-ink-700);
  --color-text-muted:#55616f;   /* AA na tle kafla i pasa: 5,13 — patrz P-75 */
  --color-text-faint:#5b6573;   /* AA na tle kafla: 4,71 — patrz P-75 */
  --color-text-link:var(--palette-blue-600);
  --color-text-link-hover:var(--palette-blue-800);
  --color-text-on-accent:var(--palette-white);
  --color-text-on-inverse:var(--palette-white);
  --color-text-on-band:var(--palette-white);
  --color-text-on-band-muted:rgba(255,255,255,.76);

  /* accent */
  --color-accent:var(--palette-blue-600);
  --color-accent-hover:var(--palette-blue-700);
  --color-accent-active:var(--palette-blue-800);
  --color-accent-quiet:var(--palette-blue-50);
  --color-accent-contrast:var(--palette-sky);      /* accent readable on the band */
  --color-accent-on-band:var(--palette-sky-soft);
  --color-decor:var(--palette-blue-200);           /* plamy ozdobne w tle */
  --color-accent-gold:var(--palette-gold);         /* zloto dzioba — jeden akcent */
  --color-text-on-gold:#2a1f04;

  /* borders & focus */
  --color-border-subtle:rgba(12,43,65,.10);
  --color-border:rgba(12,43,65,.16);
  --color-border-strong:rgba(12,43,65,.51);   /* AA 1.4.11: 3.17:1 on surface */
  --color-border-accent:var(--palette-blue-600);
  --color-focus-ring:var(--palette-blue-600); /* opaque — see --sh-focus (ring + offset) */
  --color-focus-ring-offset:var(--color-surface);

  /* controls */
  --color-field:var(--palette-white);
  --color-field-disabled:var(--palette-ink-50);
  --color-control-knob:var(--palette-white);       /* switch / toggle handle */
  --color-control-track:rgba(12,43,65,.51);        /* AA 1.4.11: 3.17:1 on surface */

  /* inverse button (sits on photography or the band) */
  --color-button-inverse:var(--palette-white);
  --color-button-inverse-hover:rgba(255,255,255,.86);
  --color-button-inverse-text:var(--palette-blue-800);

  /* tooltip */
  --color-tooltip-surface:var(--palette-blue-800);
  --color-tooltip-text:var(--palette-white);

  /* status */
  --color-success:var(--palette-green-700);
  --color-warning:var(--palette-amber-800);
  --color-danger:var(--palette-red-700);
  --color-info:var(--palette-blue-600);
  --color-success-soft:color-mix(in oklab,var(--palette-green-700) 14%,transparent);
  --color-warning-soft:color-mix(in oklab,var(--palette-gold) 16%,transparent);
  --color-danger-soft:color-mix(in oklab,var(--palette-red-700) 14%,transparent);
}

/* ── 2b. ROLES — dark ───────────────────────────────────────────────────── */
[data-theme="dark"]{
  color-scheme:dark;

  --color-surface:#071522;
  --color-surface-sunken:#04101b;
  --color-surface-elevated:#0c1e2e;
  --color-surface-floating:#12293c;
  --color-surface-inverse:var(--palette-white);
  --color-surface-band:#04101b;
  --color-surface-tint:#0b2f45;                    /* tlo strony w odcieniu znaku */
  --color-surface-tint-strong:#0e3752;
  --color-surface-glass:rgba(7,21,34,.72);
  --color-overlay:rgba(2,9,16,.66);
  --color-photo-tint:rgba(0,0,0,.28);

  --color-text-primary:#f2f7fa;
  --color-text-body:#c3d0dc;
  --color-text-muted:#9caab8;   /* AA na tle sekcji: 5,25 — patrz P-75 */
  --color-text-faint:#919fae;   /* AA na tle sekcji: 4,61 — patrz P-75 */
  --color-text-link:var(--palette-sky-soft);
  --color-text-link-hover:#b7ecf8;
  --color-text-on-accent:#04121d;
  --color-text-on-inverse:var(--palette-blue-800);
  --color-text-on-band:var(--palette-white);
  --color-text-on-band-muted:rgba(255,255,255,.76);

  --color-accent:#10aada;       /* AA na tle sekcji: 4,61 — patrz P-75 */
  --color-accent-hover:#3cc0e6;
  --color-accent-active:#6fd3ef;
  --color-accent-quiet:rgba(0,168,216,.14);
  --color-accent-contrast:var(--palette-sky-soft);
  --color-accent-on-band:var(--palette-sky-soft);
  --color-decor:var(--palette-sky);                /* plamy ozdobne w tle */
  --color-accent-gold:var(--palette-amber-400);    /* zloto dzioba, rozjasnione */
  --color-text-on-gold:#2a1f04;

  --color-border-subtle:rgba(255,255,255,.08);
  --color-border:rgba(255,255,255,.14);
  --color-border-strong:rgba(255,255,255,.35);   /* AA 1.4.11: 3.20:1 on surface */
  --color-border-accent:var(--palette-sky);
  --color-focus-ring:var(--palette-sky);         /* opaque — see --sh-focus (ring + offset) */
  --color-focus-ring-offset:var(--color-surface);

  --color-field:#0a1b29;
  --color-field-disabled:#0a1622;
  --color-control-knob:#04121d;                  /* dark knob: 6.84:1 on the accent track */
  --color-control-track:rgba(255,255,255,.55);   /* 5.7:1 against the knob */

  --color-button-inverse:var(--palette-white);
  --color-button-inverse-hover:rgba(255,255,255,.86);
  --color-button-inverse-text:var(--palette-blue-800);

  --color-tooltip-surface:#12293c;
  --color-tooltip-text:var(--palette-white);

  --color-success:var(--palette-green-400);
  --color-warning:var(--palette-amber-400);
  --color-danger:var(--palette-red-400);
  --color-info:var(--palette-sky);
  --color-success-soft:color-mix(in oklab,var(--palette-green-400) 16%,transparent);
  --color-warning-soft:color-mix(in oklab,var(--palette-amber-400) 16%,transparent);
  --color-danger-soft:color-mix(in oklab,var(--palette-red-400) 16%,transparent);
}

/* ── ROLE — jasny (P-36 poz. 3): tlo prawie biale, karta biala, unosi ja cien ── */
[data-theme="paper"]{
  color-scheme:light;

  --color-surface:var(--palette-white);
  --color-surface-sunken:#f7fafc;
  --color-surface-elevated:var(--palette-white);
  --color-surface-floating:var(--palette-white);
  --color-surface-inverse:var(--palette-blue-800);
  --color-surface-band:var(--palette-blue-800);
  --color-surface-tint:#f5fafd;
  --color-surface-tint-strong:#e9f2f8;
  --color-surface-glass:rgba(255,255,255,.80);
  --color-overlay:rgba(7,27,43,.52);
  --color-photo-tint:rgba(12,43,65,.04);
  --color-text-primary:var(--palette-blue-800);
  --color-text-body:var(--palette-ink-700);
  --color-text-muted:var(--palette-ink-500);
  --color-text-faint:#636d7c;   /* AA na tle sekcji: 4,62 — patrz P-75 */
  --color-text-link:var(--palette-blue-600);
  --color-text-link-hover:var(--palette-blue-800);
  --color-text-on-accent:var(--palette-white);
  --color-text-on-inverse:var(--palette-white);
  --color-text-on-band:var(--palette-white);
  --color-text-on-band-muted:rgba(255,255,255,.76);
  --color-accent:var(--palette-blue-600);
  --color-accent-hover:var(--palette-blue-700);
  --color-accent-active:var(--palette-blue-800);
  --color-accent-quiet:var(--palette-blue-50);
  --color-accent-contrast:var(--palette-sky);
  --color-accent-on-band:var(--palette-sky-soft);
  --color-decor:#d9e8f3;
  --color-accent-gold:var(--palette-gold);
  --color-text-on-gold:#2a1f04;
  --color-border-subtle:rgba(12,43,65,.10);
  --color-border:rgba(12,43,65,.16);
  --color-border-strong:rgba(12,43,65,.51);
  --color-border-accent:var(--palette-blue-600);
  --color-focus-ring:var(--palette-blue-600);
  --color-focus-ring-offset:var(--color-surface);
  --color-field:var(--palette-white);
  --color-field-disabled:var(--palette-ink-50);
  --color-control-knob:var(--palette-white);
  --color-control-track:rgba(12,43,65,.51);
  --color-button-inverse:var(--palette-white);
  --color-button-inverse-hover:rgba(255,255,255,.86);
  --color-button-inverse-text:var(--palette-blue-800);
  --color-tooltip-surface:var(--palette-blue-800);
  --color-tooltip-text:var(--palette-white);
  --color-success:var(--palette-green-700);
  --color-warning:var(--palette-amber-800);
  --color-danger:var(--palette-red-700);
  --color-info:var(--palette-blue-600);
  --color-success-soft:color-mix(in oklab,var(--palette-green-700) 14%,transparent);
  --color-warning-soft:color-mix(in oklab,var(--palette-gold) 16%,transparent);
  --color-danger-soft:color-mix(in oklab,var(--palette-red-700) 14%,transparent);
}

/* ── ROLE — nocny (P-36 poz. 4): neutralna czern bez granatu, barwy marki ciszej ── */
[data-theme="night"]{
  color-scheme:dark;

  --color-surface:#10151a;
  --color-surface-sunken:#0b0f13;
  --color-surface-elevated:#1b232c;
  --color-surface-floating:#222b36;
  --color-surface-inverse:var(--palette-white);
  --color-surface-band:#0b0f13;
  --color-surface-tint:#10151a;
  --color-surface-tint-strong:#161d25;
  --color-surface-glass:rgba(16,21,26,.74);
  --color-overlay:rgba(4,6,8,.68);
  --color-photo-tint:rgba(0,0,0,.28);
  --color-text-primary:#eef1f4;
  --color-text-body:#c6ccd4;
  --color-text-muted:#8e97a1;
  --color-text-faint:#868f99;
  --color-text-link:var(--palette-sky-soft);
  --color-text-link-hover:#b7ecf8;
  --color-text-on-accent:#04121d;
  --color-text-on-inverse:var(--palette-blue-800);
  --color-text-on-band:var(--palette-white);
  --color-text-on-band-muted:rgba(255,255,255,.76);
  --color-accent:var(--palette-sky);
  --color-accent-hover:#3cc0e6;
  --color-accent-active:#6fd3ef;
  --color-accent-quiet:rgba(0,168,216,.14);
  --color-accent-contrast:var(--palette-sky-soft);
  --color-accent-on-band:var(--palette-sky-soft);
  --color-decor:#2b3540;
  --color-accent-gold:var(--palette-amber-400);
  --color-text-on-gold:#2a1f04;
  --color-border-subtle:rgba(255,255,255,.08);
  --color-border:rgba(255,255,255,.14);
  --color-border-strong:rgba(255,255,255,.35);
  --color-border-accent:var(--palette-sky);
  --color-focus-ring:var(--palette-sky);
  --color-focus-ring-offset:var(--color-surface);
  --color-field:#161d25;
  --color-field-disabled:#12171d;
  --color-control-knob:#10151a;
  --color-control-track:rgba(255,255,255,.55);
  --color-button-inverse:var(--palette-white);
  --color-button-inverse-hover:rgba(255,255,255,.86);
  --color-button-inverse-text:var(--palette-blue-800);
  --color-tooltip-surface:#222b36;
  --color-tooltip-text:var(--palette-white);
  --color-success:var(--palette-green-400);
  --color-warning:var(--palette-amber-400);
  --color-danger:var(--palette-red-400);
  --color-info:var(--palette-sky);
  --color-success-soft:color-mix(in oklab,var(--palette-green-400) 16%,transparent);
  --color-warning-soft:color-mix(in oklab,var(--palette-amber-400) 16%,transparent);
  --color-danger-soft:color-mix(in oklab,var(--palette-red-400) 16%,transparent);
}

/* ── Glos basu w ciemnych motywach (350, rozb. 349): dotad = surface-band, czyli prawie tlo partytury (1,04:1).
   Lawendowy #b9a4f0: 8,4:1 do tla partytury (surface) w dark i night; inny odcien niz sopran (cyjan), alt (bursztyn), tenor (zielen).
   Selektor :root[...] (0,2,0) bije :root w nuty.css, ktory ustawia --color-glos-bas. Tylko ten glos, tylko dark i night. ── */
:root[data-theme="dark"],
:root[data-theme="night"]{
  --color-glos-bas:#b9a4f0;
}

/* ── ROLE — wysoki kontrast: AAA (7:1) zamiast minimalnego AA.
   Wlacza sie z listy wygladu albo sam, gdy system ma „zwieksz kontrast". ── */
[data-theme="kontrast"]{
  color-scheme:light;

  --color-surface:#ffffff;
  --color-surface-sunken:#ffffff;
  --color-surface-elevated:#ffffff;
  --color-surface-floating:#ffffff;
  --color-surface-inverse:#000000;
  --color-surface-band:#08304a;
  --color-surface-tint:#ffffff;
  --color-surface-tint-strong:#f2f2f2;
  --color-surface-glass:#ffffff;
  --color-overlay:rgba(0,0,0,.72);
  --color-photo-tint:transparent;
  --color-text-primary:#000000;
  --color-text-body:#14181c;
  --color-text-muted:#2f363d;
  --color-text-faint:#3c444c;
  --color-text-link:#0a3b58;
  --color-text-link-hover:#000000;
  --color-text-on-accent:#ffffff;
  --color-text-on-inverse:#ffffff;
  --color-text-on-band:#ffffff;
  --color-text-on-band-muted:#ffffff;
  --color-accent:#0a3b58;
  --color-accent-hover:#062b40;
  --color-accent-active:#000000;
  --color-accent-quiet:#e8eef2;
  --color-accent-contrast:#ffffff;
  --color-accent-on-band:#ffffff;
  --color-decor:#dcdcdc;
  --color-accent-gold:#5c4206;
  --color-text-on-gold:#ffffff;
  --color-border-subtle:rgba(0,0,0,.45);
  --color-border:rgba(0,0,0,.62);
  --color-border-strong:#000000;
  --color-border-accent:#0a3b58;
  --color-focus-ring:#000000;
  --color-focus-ring-offset:var(--color-surface);
  --color-field:#ffffff;
  --color-field-disabled:#ededed;
  --color-control-knob:#ffffff;
  --color-control-track:#000000;
  --color-button-inverse:#ffffff;
  --color-button-inverse-hover:#e8eef2;
  --color-button-inverse-text:#000000;
  --color-tooltip-surface:#000000;
  --color-tooltip-text:#ffffff;
  --color-success:#14532d;
  --color-warning:#5c4206;
  --color-danger:#7f1d1d;
  --color-info:#0a3b58;
  --color-success-soft:#e6f2ea;
  --color-warning-soft:#f6efdd;
  --color-danger-soft:#f7e6e6;
}

/* No prefers-color-scheme block on purpose: `data-theme` is the single source of
   truth, so a third theme never has to fight a media query. The OS preference is
   read once at boot by the snippet in readme.md § Theme bootstrap. */