/* ==========================================================================
   Megafon & Mikrofon — theme.css
   The ONLY file with colours, fonts and sizes. Every other CSS file uses
   these custom properties, so the whole look can be changed here.

   Ported from design-3/theme.css (SPEC 10, rev. e: design locked). Reformatted
   to one declaration per line so the "theme.css holds only custom properties"
   test can parse it line by line; values are unchanged from design-3.

   Idea: two choirs, one association. Megafon is pink, Mikrofon is turquoise.
   Those two colours mean "the choirs" and are used for identity, not for
   decoration. Everything you press is navy ("salong", the dark of the
   auditorium) so buttons always look the same.
   ========================================================================== */

/* Fonts are stored in /fonts (no Google requests, works offline, GDPR-friendly).
   Bricolage Grotesque: names of things (headings, song titles, dates).
   Atkinson Hyperlegible Next: all reading text. Made by the Braille Institute
   for people with low vision; l/I/1 and 0/O never look alike. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-next.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-next-italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Type ---------- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --font-text: "Atkinson Hyperlegible Next", Verdana, sans-serif;
  --display-stretch: 82%;
  --display-weight: 750;
  --text-weight: 400;
  --strong-weight: 700;

  /* Text size: the members' area reads at 19 px, the public site at 18 px.
     Konto > Textstorlek (--size-zoom) and Visning (--density-zoom, Enkel/Kompakt)
     combine into one --zoom multiplier (SPEC 8/10; design-3/m-visning.html section 1). */
  --size-zoom: 1;
  --density-zoom: 1;
  --zoom: calc(var(--size-zoom) * var(--density-zoom));
  --text-base: calc(1.125rem * var(--zoom));
  --text-member: calc(1.1875rem * var(--zoom));
  --text-small: calc(1rem * var(--zoom));
  --text-lead: calc(1.3125rem * var(--zoom));
  --h3: calc(1.5rem * var(--zoom));
  --h2: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) * var(--zoom));
  --h1: calc(clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem) * var(--zoom));
  --hero: clamp(2.5rem, 1.4rem + 5vw, 5.5rem);
  --leading: 1.55;
  --leading-tight: 1.08;
  --measure: 38em;

  /* ---------- Colour (light) ---------- */
  --paper: #ffffff;
  --paper-2: #f2f3fa;
  --paper-3: #e4e6f3;
  --ink: #1a1f4d;
  --ink-2: #464c7c;
  --rule: #d3d6ea;
  --rule-strong: #8d92b8;

  --megafon: #e8336d;
  --megafon-ink: #b3134a;
  --megafon-soft: #fde4ec;
  --mikrofon: #1fa9b8;
  --mikrofon-ink: #0a6973;
  --mikrofon-soft: #dcf3f5;
  --sun: #ffd23f;
  --sun-soft: #fff4c9;

  --action: #1a1f4d;
  --on-action: #ffffff;
  --action-hover: #2b3375;
  --cta: #ff5c8d;
  --on-cta: #1a1f4d;
  --link: #2e39a8;
  --focus: #e8336d;
  --ok: #17703f;
  --ok-soft: #e2f3e8;
  --danger: #b3261e;
  --danger-soft: #fbe7e5;
  --overlay: rgb(16 19 48 / 0.6);
  --stage: #1a1f4d;
  --on-stage: #ffffff;

  /* Calendar event types (chip background / bar) */
  --ev-rep-bg: #e3e6fb;
  --ev-rep-bar: #4a56c9;
  --ev-show-bg: #fde4ec;
  --ev-show-bar: #e8336d;
  --ev-party-bg: #fff1bf;
  --ev-party-bar: #e0a800;
  --ev-meet-bg: #eceef3;
  --ev-meet-bar: #7a7f99;

  /* ---------- Shape & space ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --gutter: 1rem;
  --page: 72rem;
  --tap: 3.25rem;
  --border: 2px;
  --shadow-lift: 0 1px 0 var(--rule), 0 12px 32px -18px rgb(26 31 77 / 0.45);
  --shadow-sheet: 0 -8px 40px rgb(16 19 48 / 0.25);

  /* The photo lightbox is always a black scrim with white chrome, in both themes
     (it sits over a photo, not over the page) — not part of the light/dark swap below. */
  --lightbox-bg: #000000;
  --lightbox-ink: #ffffff;
  --lightbox-border: #777777;
  --lightbox-scrim-weak: rgb(0 0 0 / 0.25);
  --lightbox-scrim-strong: rgb(0 0 0 / 0.65);
  --mask-solid: #000000;

  /* The Show tab's hero photo and "Flera produktioner" mood cards (SPEC 4.4 rev) sit a navy
     scrim over a photo so white hero text stays readable -- same reasoning as the lightbox
     tokens above, independent of light/dark theme. */
  --hero-scrim-top: rgb(8 10 26 / 0.25);
  --hero-scrim-mid: rgb(8 10 26 / 0.58);
  --hero-scrim-bottom: rgb(8 10 26 / 0.93);
  --card-scrim-top: rgb(8 10 26 / 0.1);
  --card-scrim-bottom: rgb(8 10 26 / 0.88);
  --on-stage-soft: rgb(255 255 255 / 0.92);
}

/* ---------- Show tab accents (SPEC 4.4 rev) ----------
   A small fixed set of per-production moods: vinter (vinterblå), guld (varm guld), scen
   (scenlila), skog (djup grön). Scoped by [data-accent="…"] on the show page only (hero,
   countdown chip, sub-tab indicator, mood cards) — not part of the "every colour token" test's
   fixed list below, since these are scoped tokens with no bare :root default, same as the
   lightbox tokens above. Each --chip-bg/--chip-fg pair passes WCAG AA (>=4.5:1) on its own, in
   both the light pair here and the dark pair further down; values validated in
   design-3/m-show.html. --accent-tint doesn't need a separate dark value: it's only ever used at
   low opacity (mix-blend-mode: color) over a photo. */
[data-accent="vinter"] {
  --accent-tint: #2a3f8f;
  --chip-bg: #dce6fb;
  --chip-fg: #1f3d8f;
}
[data-accent="guld"] {
  --accent-tint: #5f4310;
  --chip-bg: #fbe8c2;
  --chip-fg: #7a4e06;
}
[data-accent="scen"] {
  --accent-tint: #4c1a57;
  --chip-bg: #f0dcf5;
  --chip-fg: #6a1b7a;
}
[data-accent="skog"] {
  --accent-tint: #1c4228;
  --chip-bg: #dcefdf;
  --chip-fg: #1f5c35;
}

/* ---------- Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #12152f;
    --paper-2: #1b1f42;
    --paper-3: #272c58;
    --ink: #f1f2fa;
    --ink-2: #b9bddc;
    --rule: #353b6c;
    --rule-strong: #6d73a6;
    --megafon: #ff5e8e;
    --megafon-ink: #ff93b3;
    --megafon-soft: #3d1c3a;
    --mikrofon: #3ccbd9;
    --mikrofon-ink: #86e3ec;
    --mikrofon-soft: #13394a;
    --sun: #ffd23f;
    --sun-soft: #3a3420;
    --action: #f1f2fa;
    --on-action: #12152f;
    --action-hover: #d6d9f0;
    --cta: #ff5e8e;
    --on-cta: #12152f;
    --link: #aab3ff;
    --focus: #ff93b3;
    --ok: #6fd69a;
    --ok-soft: #173826;
    --danger: #ff8b82;
    --danger-soft: #3d1d1d;
    --overlay: rgb(4 6 20 / 0.75);
    --stage: #272c58;
    --on-stage: #ffffff;
    --ev-rep-bg: #262d63;
    --ev-rep-bar: #8e98ff;
    --ev-show-bg: #45203f;
    --ev-show-bar: #ff5e8e;
    --ev-party-bg: #3d3519;
    --ev-party-bar: #ffd23f;
    --ev-meet-bg: #262a45;
    --ev-meet-bar: #9aa0c4;
    --shadow-lift: 0 0 0 1px var(--rule);
    --shadow-sheet: 0 -8px 40px rgb(0 0 0 / 0.6);
  }
  :root:not([data-theme="light"]) [data-accent="vinter"] {
    --chip-bg: #1b2a52;
    --chip-fg: #9fb6ff;
  }
  :root:not([data-theme="light"]) [data-accent="guld"] {
    --chip-bg: #3a2c0f;
    --chip-fg: #f2c669;
  }
  :root:not([data-theme="light"]) [data-accent="scen"] {
    --chip-bg: #2f1b3a;
    --chip-fg: #e2a6f2;
  }
  :root:not([data-theme="light"]) [data-accent="skog"] {
    --chip-bg: #17301f;
    --chip-fg: #8fd6a4;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12152f;
  --paper-2: #1b1f42;
  --paper-3: #272c58;
  --ink: #f1f2fa;
  --ink-2: #b9bddc;
  --rule: #353b6c;
  --rule-strong: #6d73a6;
  --megafon: #ff5e8e;
  --megafon-ink: #ff93b3;
  --megafon-soft: #3d1c3a;
  --mikrofon: #3ccbd9;
  --mikrofon-ink: #86e3ec;
  --mikrofon-soft: #13394a;
  --sun: #ffd23f;
  --sun-soft: #3a3420;
  --action: #f1f2fa;
  --on-action: #12152f;
  --action-hover: #d6d9f0;
  --cta: #ff5e8e;
  --on-cta: #12152f;
  --link: #aab3ff;
  --focus: #ff93b3;
  --ok: #6fd69a;
  --ok-soft: #173826;
  --danger: #ff8b82;
  --danger-soft: #3d1d1d;
  --overlay: rgb(4 6 20 / 0.75);
  --stage: #272c58;
  --on-stage: #ffffff;
  --ev-rep-bg: #262d63;
  --ev-rep-bar: #8e98ff;
  --ev-show-bg: #45203f;
  --ev-show-bar: #ff5e8e;
  --ev-party-bg: #3d3519;
  --ev-party-bar: #ffd23f;
  --ev-meet-bg: #262a45;
  --ev-meet-bar: #9aa0c4;
  --shadow-lift: 0 0 0 1px var(--rule);
  --shadow-sheet: 0 -8px 40px rgb(0 0 0 / 0.6);
}
:root[data-theme="dark"] [data-accent="vinter"] {
  --chip-bg: #1b2a52;
  --chip-fg: #9fb6ff;
}
:root[data-theme="dark"] [data-accent="guld"] {
  --chip-bg: #3a2c0f;
  --chip-fg: #f2c669;
}
:root[data-theme="dark"] [data-accent="scen"] {
  --chip-bg: #2f1b3a;
  --chip-fg: #e2a6f2;
}
:root[data-theme="dark"] [data-accent="skog"] {
  --chip-bg: #17301f;
  --chip-fg: #8fd6a4;
}

/* Konto > Textstorlek (--size-zoom; combines with Visning's --density-zoom into --zoom
   above). Values unchanged from before the Mindre step was added -- only the token name
   is new, so existing large/xlarge choices still look the same. */
:root[data-size="small"] {
  --size-zoom: 0.9;
}
:root[data-size="large"] {
  --size-zoom: 1.12;
}
:root[data-size="xlarge"] {
  --size-zoom: 1.25;
}

/* Konto > Visning (--density-zoom; design-3/m-visning.html section 1 "The token switch").
   --tap stays 52px on purpose -- see that file's comment: .seg/.btn/.input compute their
   min height from --tap, which would fall under the 44px floor if --tap itself shrank.
   Density instead comes from density.css's dense-rows/desk-table, each with their own
   44px-minimum row height. */
:root[data-density="kompakt"] {
  --density-zoom: 0.92;
  --leading: 1.45;
  --s-4: 0.75rem;
  --s-5: 1rem;
  --s-6: 1.5rem;
  --s-7: 2rem;
  --r-lg: 16px;
}