/* Self-hosted fonts (Google Fonts' latin + latin-ext woff2, vendored under
   static/fonts with the family version in the filename). Serving them here
   keeps the font CDN off the critical path; unicode-range still lets the
   browser fetch only the subsets a page uses. */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/comfortaa-v47-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/comfortaa-v47-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/comfortaa-v47-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/comfortaa-v47-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/nunito-v32-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/nunito-v32-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/nunito-v32-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/nunito-v32-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/nunito-v32-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/nunito-v32-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kpopownia design tokens.
   Dark theme is the default (:root); the light theme overrides the colour
   tokens only, so every component reads the same custom properties in both.
   See README.md for the token → Tailwind mapping and the contrast table.

   The panel wears a theme of its own (admin.css re-declares these tokens on
   .admin), and a few of its screens draw a piece of the shop inside it — a
   banner preview, a carousel, the phone beside the crop. Such a frame carries
   .shopface, which declares the shop's tokens again, so the preview inside it
   looks exactly like the shop rather than like the panel around it. */

.shopface,
:root {
  color-scheme: dark;

  /* Surfaces */
  --stage: #0d1220;
  --stage-mid: #151c30;
  --surface: #1a2238;
  --surface-raised: #222c48;
  --line: rgba(220, 230, 255, 0.14);
  --line-strong: rgba(220, 230, 255, 0.28);
  /* The edge of a control a person has to find before using it — a text
     field, a checkbox, a radio, the quantity stepper, a chip, a carousel
     dot. WCAG 1.4.11 wants 3:1 against whatever it sits on, which
     --line-strong (2.2:1) does not reach; this clears 3:1 on --stage,
     --stage-mid, --surface and --surface-raised. A divider stays on --line. */
  --control-border: rgba(220, 230, 255, 0.42);

  /* Ink */
  --ink: #eef3ff;
  --ink-soft: rgba(220, 230, 255, 0.78);
  --ink-muted: rgba(220, 230, 255, 0.6);
  /* Opaque equivalents of --ink-soft and --line, flattened onto --surface.
     They exist for surfaces that cannot do alpha at all: e-mail, where Gmail
     and Outlook resolve no rgba(). Keep them in step with the two values
     above — they are the same colours, with the maths already done. */
  --ink-soft-solid: #b1bbd3;
  --line-solid: #353d54;

  /* Brand accents */
  --primary: #ff9ec8;
  --primary-deep: #ff7eb3;
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --on-primary: #1a0d16;
  --secondary: #8ec8ff;
  --secondary-deep: #6ab0f5;
  --secondary-soft: color-mix(in srgb, var(--secondary) 14%, transparent);
  --on-secondary: #0b1424;
  --primary-tint: #ffb2d8;
  --secondary-tint: #aad2ff;

  /* Two accents that belong to the pictures rather than to the interface:
     the violet and the mint the drawn covers are mixed from, and the two
     colours a carousel's glow can be lit in besides the brand pair. They do
     not change with the theme, for the same reason --hero-ink does not — a
     photograph does not change with the theme either, and these stand in a
     photograph's place. Tokens rather than literals because three separate
     rules were reaching for the same two values. */
  --accent-violet: #a06bff;
  --accent-mint: #7de3d0;

  /* The product accents (spec docs-archive:docs/superpowers/specs/2026-09-14-product-look-design.md). Each is a
     trio: the fill a button wears under --on-primary text (pastel, the same
     in both themes, like --primary-fill), the deeper fill it hovers to, and
     the ink it writes with — an eyebrow, a chip border, a focus ring. In
     the dark theme ink and fill coincide; the light theme overrides the
     ink below, because a pastel on white cannot be read (README, WCAG).
     Every *-deep needs --on-primary on top of it at >= 4.5:1 — it is the CTA's
     hover fill. #8a4fff (the first violet-deep) only reached 4.17:1; #9a63ff
     is a touch darker/more saturated than --accent-violet (#a06bff) and
     clears the bar at 5.03:1 (WCAG relative luminance, computed). */
  --accent-azure: var(--secondary-tint);
  --accent-azure-deep: var(--secondary);
  --accent-azure-ink: var(--secondary);
  --accent-violet-deep: #9a63ff;
  /* The one ink that does not coincide with its fill: #a06bff on its own
     14% tint (the "confirmed" status pill) managed 3.77:1; this lighter
     violet of the same hue reads 4.82 there. */
  --accent-violet-ink: #b48cff;
  --accent-mint-deep: #5ad4be;
  --accent-mint-ink: var(--accent-mint);
  --accent-gold: var(--warning);
  --accent-gold-deep: #ffc35c;
  --accent-gold-ink: var(--warning);

  /* Filled controls (primary buttons, badges, the stepper circle, the
     current pagination page) share one face in BOTH themes: the soft pink
     that keeps --on-primary text readable. Only these two are
     theme-independent — --primary itself stays deep in the light theme,
     because it doubles as an accent text colour on white. */
  --primary-fill: #ff9ec8;
  --primary-fill-deep: #ff7eb3;

  /* Semantic */
  --success: #7fe0b0;
  --success-soft: color-mix(in srgb, var(--success) 14%, transparent);
  --warning: #ffd27f;
  --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent);
  --danger: #ff8a9a;
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  /* Caution sits between warning and danger: an orange for "worse than a
     warning, not yet a loss" — the margins screen's threshold 1. */
  --caution: #ffae70;
  --caution-soft: color-mix(in srgb, var(--caution) 14%, transparent);
  --on-warning: #1a0d16;
  --focus: var(--secondary);

  /* Neutral helpers */
  --white: #ffffff;
  --backdrop: rgba(5, 8, 16, 0.6);
  --shimmer: color-mix(in srgb, var(--white) 8%, transparent);
  /* A photo hero always renders light ink, whatever the theme. */
  --hero-ink: #eef3ff;
  --hero-ink-soft: rgba(220, 230, 255, 0.85);

  /* Overlays on a photograph or a duotone cover. Dark in both themes, because
     what they sit on is dark in both: a caption's scrim, a credit's ground,
     a control floating over a picture. --backdrop-deep is the lightbox's
     veil, darker than a dialog's so the photo is all there is to look at. */
  --scrim-ink: #0d1220;
  --scrim: color-mix(in srgb, var(--scrim-ink) 55%, transparent);
  --scrim-strong: color-mix(in srgb, var(--scrim-ink) 82%, transparent);
  --backdrop-deep: rgba(5, 8, 16, 0.85);

  /* Duotone covers: the palette the photo placeholders and the hero's
     coloured grounds paint with. -a and -b are the two accents, -base the
     dark ground they are mixed into, --duotone-ink the darkest point of any
     of them. Fixed, not themed, for the same reason --hero-ink is: a colour
     the shop picked must not turn pastel in the light theme. */
  --duotone-ink: #0b0f1a;
  --duotone-pink-a: #ff7eb3;
  --duotone-pink-b: #a06bff;
  --duotone-pink-base: #1d1230;
  --duotone-azure-a: #6ab0f5;
  --duotone-azure-b: #7de3d0;
  --duotone-azure-base: #0f1d2c;
  --duotone-violet-a: #a06bff;
  --duotone-violet-b: #6ab0f5;
  --duotone-violet-base: #161634;
  --duotone-mint-a: #7de3d0;
  --duotone-mint-b: #a06bff;
  --duotone-mint-base: #10202c;
  --duotone-magenta-a: #e0509b;
  --duotone-magenta-b: #ff9ec8;
  --duotone-magenta-base: #2a1030;
  --duotone-brand-a: #ff7eb3;
  --duotone-brand-b: #6ab0f5;
  --duotone-brand-base: #171a33;

  /* Holographic foil (.hero__title--holo): pastel on a dark ground, with a
     glow; the light theme swaps in the deep foil and drops the glow, and a
     coloured hero ground, dark in both themes, puts the pastel one back. */
  --holo-foil-pastel: linear-gradient(100deg, #ffb2d8 0%, #fff0b3 18%, #b8f5e6 36%, #c9c2ff 54%, #aad2ff 72%, #ffb2d8 90%);
  --holo-foil-deep: linear-gradient(100deg, #e9528e 0%, #c9931b 18%, #1f9d86 36%, #7b4fd8 54%, #2a6db5 72%, #e9528e 90%);
  --holo-glow-pastel: drop-shadow(0 0 14px color-mix(in srgb, var(--white) 22%, transparent));
  --holo-foil: var(--holo-foil-pastel);
  --holo-glow: var(--holo-glow-pastel);

  /* Gradients and glow */
  --gradient-brand: linear-gradient(120deg, #ffd0e6 0%, #ffffff 40%, #c8e4ff 100%);
  --gradient-hero:
    radial-gradient(80% 55% at 50% 115%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 55%),
    radial-gradient(70% 50% at 18% 0%, color-mix(in srgb, var(--primary-deep) 18%, transparent) 0%, transparent 50%),
    radial-gradient(70% 50% at 82% 0%, color-mix(in srgb, var(--secondary) 20%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, #10182b 0%, var(--stage) 55%, #0a0e18 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(13, 18, 32, 0.25) 0%, rgba(13, 18, 32, 0.62) 100%);
  --glow-pink: 0 0 18px color-mix(in srgb, var(--primary) 45%, transparent);
  --glow-blue: 0 0 42px color-mix(in srgb, var(--secondary) 30%, transparent);
  --glow-brand: drop-shadow(0 0 18px color-mix(in srgb, var(--primary) 45%, transparent)) drop-shadow(0 0 42px color-mix(in srgb, var(--secondary) 30%, transparent));

  /* Typography */
  --font-brand: "Comfortaa", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The face of h1–h3. The shop sets them in its logo's face; the panel
     points this elsewhere and keeps --font-brand for the logo alone. */
  --font-heading: var(--font-brand);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;
  --text-7xl: 5.5rem;
  --text-hero: clamp(2.8rem, 10vw, 5.4rem);
  /* Display sizes: a banner's title and the countdown's digits. Each step
     grows with the box it stands in (cqi — the viewport when nothing sets a
     container) between two steps of the text scale, so a banner's title never
     drops below a page heading and no component carries a clamp() of its own.
     xs 24–32, s 32–40, m 32–56, l 40–72, xl 40–88 px. */
  --display-xs: clamp(var(--text-2xl), 3.5cqi, var(--text-3xl));
  --display-s: clamp(var(--text-3xl), 4.5cqi, var(--text-4xl));
  --display-m: clamp(var(--text-3xl), 6cqi, var(--text-5xl));
  --display-l: clamp(var(--text-4xl), 8cqi, var(--text-6xl));
  --display-xl: clamp(var(--text-4xl), 10cqi, var(--text-7xl));
  --leading-body: 1.5;
  --leading-heading: 1.15;
  --leading-hero: 1.05;
  --tracking-brand: 0.04em;

  /* Spacing (4-pt) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  /* The corner of a button. The shop's buttons are pills; the panel's are
     not, and this is the one place the two differ. */
  --radius-control: var(--radius-pill);

  /* Controls: the height of a button or a text field, its small variant,
     and the size of a button's label. 44px is a thumb's target — right for
     a shop on a phone, too large for a desk clicked with a mouse all day. */
  --control-height: 2.75rem;
  --control-height-sm: 2.25rem;
  --control-font: var(--text-base);

  /* Figures in a column of numbers: tabular in the shop's face, so a price
     or a counter does not shuffle as its digits change. */
  --figures: tabular-nums;

  /* The register of a small label over a group (a table's header row, a
     heading between groups of fields): the shop sets them in spaced
     capitals, the panel in plain letters. */
  --label-transform: uppercase;
  --label-tracking: 0.08em;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);

  /* Layers */
  --z-navbar: 50;
  --z-drawer: 60;
  --z-toast: 100;

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-page: 300ms;
  --dur-slow: 400ms;
  /* Everything that arrives eases out; everything that leaves eases in; the
     spring overshoots and is kept for small things — a counter, never a
     panel. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container: 80rem;
}

[data-theme="light"] .shopface,
[data-theme="light"] {
  color-scheme: light;

  /* A powder-pink ground, a card a shade lighter, and pure white only for
     what floats above the card. The neutrals carry the brand's pink rather
     than a blue-grey: the cool #f6f7fc and #e8eaf1 grounds, navy ink and navy
     lines read as cold, however much pink the accents put on top. */
  --stage: #fdf5f8;
  --stage-mid: #f9eaf0;
  --surface: #fffbfc;
  --surface-raised: #ffffff;
  --line: rgba(90, 30, 60, 0.12);
  --line-strong: rgba(90, 30, 60, 0.24);
  --control-border: rgba(90, 30, 60, 0.55);

  --ink: #2a1622;
  --ink-soft: rgba(42, 22, 34, 0.78);
  --ink-muted: rgba(42, 22, 34, 0.64);
  /* See the note on these two in :root. This is the pair the order e-mails
     actually draw on, because the letters are the light theme. */
  --ink-soft-solid: #594852;
  --line-solid: #ebe0e5;

  /* Pink is text here as often as it is a mark — prices, 12 px eyebrows, the
     required-field star — so it clears 4.5:1 on every light ground: 4.90 on
     --stage, 4.52 on --stage-mid, 5.12 on --surface (#e9528e managed 3.24).
     Violet, green and red are held to the same three grounds. */
  --primary: #c2336f;
  --primary-deep: #b02a64;
  --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --on-primary: #1a0d16;
  /* The second accent is violet, not blue: links, focus, the "on order"
     chip. #8a4cc0 is the lightest violet that still reads as text on
     --stage-mid (4.66); its soft fill is the pastel #c3a3ee rather than a
     tint of itself, weak enough (16%) to keep #8a4cc0 at 4.57 on top of it
     over --stage — the info badge and the "shipped" pill (22% gave 4.39). */
  --secondary: #8a4cc0;
  --secondary-deep: #7440a8;
  --secondary-soft: color-mix(in srgb, #c3a3ee 16%, transparent);
  --on-secondary: #ffffff;
  --primary-tint: #ff9ec8;
  --secondary-tint: #8ec8ff;

  /* The azure product accent stays azure though --secondary went violet:
     its ink is pinned to a blue that clears 4.5:1 here (5.59 on --stage),
     and its deep fill to the dark theme's --secondary-deep, #6ab0f5, which
     clears 8.21:1 against --on-primary. */
  --accent-azure-ink: #2565a8;
  --accent-azure-deep: #6ab0f5;
  --accent-violet-ink: #6a3fd1;
  --accent-mint-ink: #127667;
  --accent-gold: #ffd27f;
  --accent-gold-deep: #ffc35c;

  --success: #177347;
  --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
  --warning: #8a5200;
  --warning-soft: color-mix(in srgb, var(--warning) 14%, transparent);
  --danger: #c0213d;
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --caution: #c2410c;
  --caution-soft: color-mix(in srgb, var(--caution) 12%, transparent);
  --on-warning: #1a0d16;
  --backdrop: rgba(42, 22, 34, 0.45);
  --holo-foil: var(--holo-foil-deep);
  --holo-glow: none;

  --gradient-brand: linear-gradient(120deg, #e9528e 0%, #c460b8 50%, #a472dc 100%);
  --gradient-hero:
    radial-gradient(80% 55% at 50% 115%, color-mix(in srgb, var(--primary-deep) 26%, transparent) 0%, transparent 55%),
    radial-gradient(70% 50% at 18% 0%, color-mix(in srgb, var(--primary-tint) 45%, transparent) 0%, transparent 50%),
    radial-gradient(70% 50% at 82% 0%, color-mix(in srgb, #c3a3ee 60%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--surface-raised) 0%, var(--stage) 60%, #f7e3eb 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(13, 18, 32, 0.25) 0%, rgba(13, 18, 32, 0.62) 100%);
  --glow-pink: 0 0 18px color-mix(in srgb, var(--primary) 30%, transparent);
  --glow-blue: 0 0 42px color-mix(in srgb, var(--secondary) 20%, transparent);
  --glow-brand: drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 25%, transparent));

  --shadow-1: 0 1px 2px rgba(90, 30, 60, 0.07), 0 2px 10px rgba(90, 30, 60, 0.08);
  --shadow-2: 0 8px 24px rgba(90, 30, 60, 0.13), 0 2px 6px rgba(90, 30, 60, 0.07);
}