/* =========================================================
   Event styles
   ---------------------------------------------------------
   Each style overrides semantic tokens only. It may change type,
   shape, borders, labels and the cover; it never changes layout,
   content or order (DS5). Applied with data-style on the element
   that wraps an event's guest-facing page.
   ========================================================= */

@layer styles {
  /* Invitation is Live's own look: nothing to override. Named so an
     event can choose it explicitly and later diverge if needed. */
  [data-style="invitation"] {
    --style-name: "invitation";
  }

  /* ---- Poster: bold, expressive, attention-grabbing ------------- */
  [data-style="poster"] {
    --style-name: "poster";

    --font-display: var(--p-face-bricolage);
    --font-display-safe: var(--p-face-noto-sans);

    --title-weight: 800;
    --title-weight-safe: 800;
    --title-tracking-safe: -0.03em;
    --title-tracking: -0.035em;
    --title-leading: 0.98;
    --title-style-accent: normal;

    --heading-font: var(--p-face-bricolage);
    --heading-weight: 800;
    --heading-tracking: -0.03em;

    --data-weight: 700;

    --radius-card: 18px;
    --radius-inner: 14px;
    --radius-control: 16px;
    --radius-field: 12px;
    --radius-chip: 10px;

    --shadow-action: none;

    --cover-title-font: var(--p-face-bricolage);
    --cover-title-weight: 800;
    --cover-title-weight-safe: 800;
    --cover-title-style: normal;
    --cover-title-case: uppercase;
    --cover-title-tracking: -0.045em;
    --cover-radius: 24px;
  }

  /* ---- Programme: structured, precise, event-first -------------- */
  [data-style="programme"] {
    --style-name: "programme";

    --font-display: var(--p-face-familjen);
    --font-display-safe: var(--p-face-noto-sans);
    --font-data: var(--p-face-plex-mono);

    --title-weight: 600;
    --title-weight-safe: 600;
    --title-tracking-safe: -0.02em;
    --title-tracking: -0.03em;
    --title-leading: 1.02;
    --title-style-accent: normal;

    --heading-font: var(--p-face-plex-mono);
    --heading-weight: 500;
    --heading-tracking: 0.04em;

    --label-font: var(--p-face-plex-mono);
    --label-size: 0.75rem;
    --label-weight: 500;
    --label-case: uppercase;
    --label-tracking: 0.04em;
    --label-color: var(--color-faint);

    --data-weight: 500;

    --color-page: var(--p-canvas-2);

    --radius-card: 14px;
    --radius-inner: 12px;
    --radius-control: 10px;
    --radius-field: 8px;
    --radius-chip: 6px;

    --border-card: 0 solid transparent;
    --divider: 1px dashed var(--color-line-strong);
    --perforation: 2px dashed var(--color-line-strong);
    --shadow-card: var(--p-shadow-sm);
    --shadow-action: none;

    --cover-pattern: radial-gradient(rgba(250, 250, 253, 0.22) 1.2px, transparent 1.3px);
    --cover-pattern-size: 14px 14px;
    --cover-title-font: var(--p-face-familjen);
    --cover-title-weight: 700;
    --cover-title-weight-safe: 700;
    --cover-title-style: normal;
    --cover-title-tracking: -0.04em;
    --cover-radius: 14px;
  }
}