/*
 * Host-customizable look of the guest page (see GuestTheme). The theme sets three
 * numbers (hue, chroma, roundness) as custom properties plus a few data
 * attributes; everything else is derived here. Used on the guest pages and in
 * the live preview of the theme editor.
 */
@layer components {
  .guest-theme {
    --theme-hue: 155;
    --theme-chroma: 0.07;
    --theme-roundness: 0.5;
    --theme-title-scale: 1;
    --theme-welcome-scale: 1;
    --theme-heading-weight: 480;

    /* Colors: one hue drives accent, tinted neutrals and a complementary highlight */
    --color-accent: light-dark(oklch(46% var(--theme-chroma) var(--theme-hue)), oklch(80% var(--theme-chroma) var(--theme-hue)));
    --color-on-accent: light-dark(oklch(98.5% 0.01 var(--theme-hue)), oklch(18% 0.03 var(--theme-hue)));
    --color-highlight: light-dark(oklch(78% calc(var(--theme-chroma) * 0.9) calc(var(--theme-hue) + 50)), oklch(72% calc(var(--theme-chroma) * 0.9) calc(var(--theme-hue) + 50)));
    --color-bg: light-dark(oklch(98% calc(var(--theme-chroma) * 0.12) var(--theme-hue)), oklch(17% calc(var(--theme-chroma) * 0.18) var(--theme-hue)));
    --color-surface: light-dark(oklch(99.7% calc(var(--theme-chroma) * 0.04) var(--theme-hue)), oklch(22% calc(var(--theme-chroma) * 0.18) var(--theme-hue)));
    --color-surface-sunken: light-dark(oklch(95.5% calc(var(--theme-chroma) * 0.16) var(--theme-hue)), oklch(15% calc(var(--theme-chroma) * 0.14) var(--theme-hue)));
    --color-border: light-dark(oklch(89% calc(var(--theme-chroma) * 0.16) var(--theme-hue)), oklch(31% calc(var(--theme-chroma) * 0.18) var(--theme-hue)));
    --color-border-strong: light-dark(oklch(80% calc(var(--theme-chroma) * 0.22) var(--theme-hue)), oklch(43% calc(var(--theme-chroma) * 0.2) var(--theme-hue)));
    --color-text: light-dark(oklch(24% calc(var(--theme-chroma) * 0.15) var(--theme-hue)), oklch(95% calc(var(--theme-chroma) * 0.06) var(--theme-hue)));
    --color-text-muted: light-dark(oklch(46% calc(var(--theme-chroma) * 0.18) var(--theme-hue)), oklch(74% calc(var(--theme-chroma) * 0.12) var(--theme-hue)));
    /* Derived tokens have to be re-declared so they pick up the themed accent */
    --color-accent-subtle: color-mix(in oklab, var(--color-accent) 13%, var(--color-surface));
    --color-focus: color-mix(in oklab, var(--color-accent) 55%, transparent);

    /* Shape: roundness scales every radius */
    --radius-s: calc(var(--theme-roundness) * 0.6rem);
    --radius-m: calc(var(--theme-roundness) * 1.25rem);
    --radius-l: calc(var(--theme-roundness) * 2rem);
    --radius-xl: calc(var(--theme-roundness) * 3rem);
    --theme-bevel: calc(4px + var(--theme-roundness) * 16px);

    color-scheme: light dark;
    background-color: var(--color-bg);
    color: var(--color-text);

    & :is(h1, h2) {
      font-weight: var(--theme-heading-weight);
      /* Normalizes the visual size across very different heading fonts */
      font-size-adjust: ex-height 0.5;
    }
  }

  /* Headline sizes chosen with the two sliders */
  .guest-theme .guest-event__header h1 {
    font-size: calc(var(--step-4) * var(--theme-title-scale));
  }

  .guest-theme .guest-event__welcome {
    font-size: calc(var(--step-1) * var(--theme-welcome-scale));
  }

  /* Brightness */
  .guest-theme[data-theme-mode="light"] { color-scheme: light; }
  .guest-theme[data-theme-mode="dark"] { color-scheme: dark; }

  /* Heading fonts */
  /* Title font (also used for other headings); families are defined in guest_theme_layout.css */
  .guest-theme[data-theme-font="fraunces"] { --font-display: var(--font-fraunces); }
  .guest-theme[data-theme-font="playfair"] { --font-display: var(--font-playfair); --theme-heading-weight: 560; }
  .guest-theme[data-theme-font="inter"] { --font-display: var(--font-inter); --theme-heading-weight: 750; }
  .guest-theme[data-theme-font="bricolage"] { --font-display: var(--font-bricolage); --theme-heading-weight: 720; }
  .guest-theme[data-theme-font="caveat"] { --font-display: var(--font-caveat); --theme-heading-weight: 650; }

  .guest-theme[data-theme-font="inter"] :is(h1, h2),
  .guest-theme[data-theme-font="bricolage"] :is(h1, h2) {
    letter-spacing: -0.03em;
  }

  /* Shapes */
  .guest-theme[data-theme-shape="square"] {
    --radius-s: 0px;
    --radius-m: 0px;
    --radius-l: 0px;
    --radius-xl: 0px;
  }

  .guest-theme[data-theme-shape="pill"] {
    --radius-m: 999px;
    --radius-l: calc(1rem + var(--theme-roundness) * 1.5rem);
    --radius-xl: calc(1.5rem + var(--theme-roundness) * 2rem);

    & textarea.field__input { border-radius: var(--radius-l); }
  }

  /* Leaf: two opposite corners round, the other two almost square */
  .guest-theme[data-theme-shape="leaf"] {
    --radius-m: calc(var(--theme-roundness) * 1.5rem) calc(var(--theme-roundness) * 0.2rem);
    --radius-l: calc(var(--theme-roundness) * 2.75rem) calc(var(--theme-roundness) * 0.35rem);
    --radius-xl: calc(var(--theme-roundness) * 3.5rem) calc(var(--theme-roundness) * 0.4rem);
  }

  /* Squircle: smooth superellipse corners where corner-shape is supported */
  .guest-theme[data-theme-shape="squircle"] {
    --radius-m: calc(var(--theme-roundness) * 1.75rem);
    --radius-l: calc(var(--theme-roundness) * 3rem);

    & :is(.card, .btn, .field__input, .mode-switch__option, .dropzone, .upload-item) {
      corner-shape: squircle;
    }
  }

  /* Bevel: cut-off corners. corner-shape keeps borders and shadows intact;
     older browsers get the same silhouette via clip-path. */
  .guest-theme[data-theme-shape="bevel"] :is(.card, .btn, .field__input, .mode-switch__option, .dropzone, .upload-item) {
    border-radius: var(--theme-bevel);
    corner-shape: bevel;
  }

  @supports not (corner-shape: bevel) {
    .guest-theme[data-theme-shape="bevel"] :is(.card, .btn, .field__input, .mode-switch__option, .dropzone, .upload-item) {
      border-radius: 0;
      clip-path: polygon(
        var(--theme-bevel) 0, calc(100% - var(--theme-bevel)) 0, 100% var(--theme-bevel),
        100% calc(100% - var(--theme-bevel)), calc(100% - var(--theme-bevel)) 100%,
        var(--theme-bevel) 100%, 0 calc(100% - var(--theme-bevel)), 0 var(--theme-bevel)
      );

      /* A box-shadow focus ring would be clipped away */
      &:focus-visible, &:has(:focus-visible) {
        outline: 3px solid var(--color-focus);
        outline-offset: -3px;
      }
    }
  }

  /* Backgrounds */
  .guest-theme[data-theme-background="plain"] { background-image: none; }

  .guest-theme[data-theme-background="glow"] {
    background-image:
      radial-gradient(50rem 28rem at 50% -8%, color-mix(in oklab, var(--color-accent) 18%, transparent), transparent 70%),
      radial-gradient(40rem 30rem at 110% 110%, color-mix(in oklab, var(--color-highlight) 16%, transparent), transparent 70%);
  }

  .guest-theme[data-theme-background="dots"] {
    background-image: radial-gradient(color-mix(in oklab, var(--color-accent) 24%, transparent) 1.3px, transparent 1.8px);
    background-size: 22px 22px;
  }

  .guest-theme[data-theme-background="grid"] {
    background-image:
      linear-gradient(color-mix(in oklab, var(--color-accent) 11%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 11%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
  }
}