/* Shop styles (ShopStyle): what an organizer or Usetix's AI designer chose
   beyond the palette and faces, read from the data-look-* attributes on
   <html> and <body> (shop_theme_attributes). Each option's first value is the
   shop as it always looked and needs no rule here.

   This file only adjusts tokens: corners, buttons, density, type scale, cards
   and headings change what every block reads, and the texture and backdrop
   become layers of the page's background (global.css). The layouts (hero,
   event list, event page, header) and the treatment of pictures live with
   their blocks. Every value keeps the shop readable: sizes never go below
   the type scale's smallest step, and textures stay faint. */

/* ── Corners ──────────────────────────────────────────────────────────── */
[data-look-corners="sharp"] {
  --radius-scale: 0;
}

[data-look-corners="subtle"] {
  --radius-scale: 0.45;
}

[data-look-corners="round"] {
  --radius-scale: 1.45;
}

/* ── Buttons and chips ────────────────────────────────────────────────── */
[data-look-buttons="rounded"] {
  --button-radius: 0.5rem;
}

[data-look-buttons="square"] {
  --button-radius: 0;
}

/* ── Density: every space token scales (tokens.css) ───────────────────── */
[data-look-density="airy"] {
  --space-scale: 1.25;
}

[data-look-density="compact"] {
  --space-scale: 0.82;
}

/* ── Type scale: page and section titles, never body text ─────────────── */
[data-look-type-scale="bold"] {
  --display-scale: 1.22;
}

[data-look-type-scale="restrained"] {
  --display-scale: 0.86;
}

/* ── Cards: the edge every card, poster and cover is drawn with ───────── */
[data-look-cards="outlined"] {
  --shadow-card: 0 0 0 var(--border-width) color-mix(in oklch, var(--color-text) 24%, transparent);
}

[data-look-cards="filled"] {
  --shadow-card: none;
}

/* Printed look: a solid outline and a hard shadow offset to the corner */
[data-look-cards="offset"] {
  --border-width: 2px;
  --shadow-card: 0 0 0 2px var(--color-text), 5px 5px 0 0 var(--color-text);
}

/* ── Headings ─────────────────────────────────────────────────────────── */
/* Capitals run wider: a little tracking, and the event title sizes itself
   for the wider letters (event-hero.css) */
[data-look-heading-case="uppercase"] {
  --heading-case: uppercase;
  --heading-case-tracking: 0.03em;
  --title-case-width: 1.2;
}

/* ── Texture: a faint pattern over the page colour ────────────────────── */
[data-look-texture="grain"] {
  --look-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-look-texture="grain"][data-scheme="dark"] {
  --look-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-look-texture="dots"] {
  --look-texture: radial-gradient(color-mix(in oklch, var(--color-text) 14%, transparent) 1px, transparent 1.6px);
  --look-texture-size: 22px 22px;
}

/* One gradient draws both lines of each tile: its top and left edge */
[data-look-texture="grid"] {
  --look-texture: conic-gradient(from 90deg at 1px 1px, transparent 90deg, color-mix(in oklch, var(--color-text) 7%, transparent) 0);
  --look-texture-size: 44px 44px;
}

[data-look-texture="lines"] {
  --look-texture: repeating-linear-gradient(-45deg, color-mix(in oklch, var(--color-text) 6%, transparent) 0 1px, transparent 1px 14px);
}

/* ── Backdrop: light falling on the top of the page ───────────────────── */
/* Only a page with a texture or backdrop gets a background image: axe can't
   tell the contrast of text over one, so plain pages stay plain for it */
:where(body):is([data-look-texture]:not([data-look-texture="none"]), [data-look-backdrop]:not([data-look-backdrop="plain"])) {
  background-image: var(--look-texture, none), var(--look-backdrop, none);
  background-repeat: repeat, no-repeat;
  background-size: var(--look-texture-size, auto), 100% min(100%, 70rem);
}

[data-look-backdrop="glow"] {
  --look-backdrop: radial-gradient(90% 55% at 50% 0%, color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 70%);
}

[data-look-backdrop="gradient"] {
  --look-backdrop: linear-gradient(165deg, var(--color-surface-1), transparent 55%);
}