/*
 * PureCookbook design tokens and primitives.
 * Shared by the website, the extension pages, shared recipe pages and the
 * in-page reader (inside a shadow root, hence :host). See docs/design-system.md.
 */
:root,
:host {
  color-scheme: light dark;

  /* Colour: warm paper, near-black ink, one paprika accent. */
  --pc-bg: oklch(98.4% 0.005 80);
  --pc-raised: oklch(99.3% 0.003 80);
  --pc-sunken: oklch(95.6% 0.007 78);
  --pc-ink: oklch(23% 0.01 60);
  --pc-ink-muted: oklch(43% 0.012 60);
  --pc-ink-subtle: oklch(51% 0.01 62);
  --pc-rule: oklch(90.5% 0.008 75);
  --pc-control: oklch(63% 0.012 65);
  --pc-accent: oklch(52% 0.15 42);
  --pc-accent-ink: oklch(98.6% 0.006 70);
  --pc-accent-soft: oklch(94.5% 0.03 48);
  --pc-danger: oklch(47% 0.16 27);
  --pc-scrim: oklch(20% 0.01 60 / 0.45);

  /* Type */
  --pc-font-read:
    Literata, "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif;
  --pc-font-ui:
    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pc-text-xs: 0.8125rem;
  --pc-text-sm: 0.9375rem;
  --pc-text-base: 1.0625rem;
  --pc-text-lg: 1.1875rem;
  --pc-text-xl: 1.375rem;
  --pc-text-2xl: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);
  --pc-text-3xl: clamp(2.375rem, 1.6rem + 3.4vw, 4rem);
  --pc-leading-tight: 1.12;
  --pc-leading-snug: 1.35;
  --pc-leading-body: 1.6;
  --pc-measure: 66ch;

  /* Space: 4px base */
  --pc-space-1: 0.25rem;
  --pc-space-2: 0.5rem;
  --pc-space-3: 0.75rem;
  --pc-space-4: 1rem;
  --pc-space-5: 1.5rem;
  --pc-space-6: 2rem;
  --pc-space-7: 3rem;
  --pc-space-8: 4rem;
  --pc-space-9: 6rem;
  --pc-gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);

  /* Shape and motion */
  --pc-radius-sm: 4px;
  --pc-radius: 8px;
  --pc-radius-lg: 12px;
  --pc-control-height: 2.5rem;
  --pc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pc-fast: 120ms;
  --pc-slow: 220ms;
}
/*
 * Dark theme. Follows the system unless the reader chose a theme on
 * purecookbook.com (data-theme on <html>, set by theme.js before first paint).
 * The in-page launcher (:host) always follows the system.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :host {
    --pc-bg: oklch(19% 0.007 65);
    --pc-raised: oklch(22.5% 0.008 65);
    --pc-sunken: oklch(24.5% 0.009 65);
    --pc-ink: oklch(92% 0.01 80);
    --pc-ink-muted: oklch(76% 0.012 75);
    --pc-ink-subtle: oklch(66% 0.01 72);
    --pc-rule: oklch(31% 0.01 65);
    --pc-control: oklch(55% 0.012 68);
    --pc-accent: oklch(73% 0.13 48);
    --pc-accent-ink: oklch(19% 0.01 60);
    --pc-accent-soft: oklch(30% 0.045 48);
    --pc-danger: oklch(73% 0.14 28);
    --pc-scrim: oklch(8% 0.005 60 / 0.6);
  }
}
:root[data-theme="dark"] {
  --pc-bg: oklch(19% 0.007 65);
  --pc-raised: oklch(22.5% 0.008 65);
  --pc-sunken: oklch(24.5% 0.009 65);
  --pc-ink: oklch(92% 0.01 80);
  --pc-ink-muted: oklch(76% 0.012 75);
  --pc-ink-subtle: oklch(66% 0.01 72);
  --pc-rule: oklch(31% 0.01 65);
  --pc-control: oklch(55% 0.012 68);
  --pc-accent: oklch(73% 0.13 48);
  --pc-accent-ink: oklch(19% 0.01 60);
  --pc-accent-soft: oklch(30% 0.045 48);
  --pc-danger: oklch(73% 0.14 28);
  --pc-scrim: oklch(8% 0.005 60 / 0.6);
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
@media (pointer: coarse) {
  :root,
  :host {
    --pc-control-height: 2.75rem;
  }
}

/* Visually hidden, still announced. */
.pc-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Buttons. Secondary is the default; primary is used at most once per view. */
.pc-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pc-space-2);
  min-height: var(--pc-control-height);
  padding: 0 var(--pc-space-4);
  border: 1px solid var(--pc-rule);
  border-radius: var(--pc-radius);
  background: transparent;
  color: var(--pc-ink);
  font: 500 var(--pc-text-sm) / 1.2 var(--pc-font-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--pc-fast) var(--pc-ease),
    border-color var(--pc-fast) var(--pc-ease),
    color var(--pc-fast) var(--pc-ease);
}
.pc-btn:hover {
  background: var(--pc-sunken);
  border-color: var(--pc-control);
}
.pc-btn:disabled {
  cursor: progress;
  color: var(--pc-ink-muted);
}
.pc-btn--primary {
  background: var(--pc-ink);
  border-color: var(--pc-ink);
  color: var(--pc-bg);
}
.pc-btn--primary:hover {
  background: color-mix(in oklch, var(--pc-ink) 86%, var(--pc-bg));
  border-color: transparent;
}
.pc-btn[aria-pressed="true"] {
  background: var(--pc-accent-soft);
  border-color: var(--pc-accent);
}
.pc-btn svg {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Text button: looks like a link, behaves like a button. */
.pc-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--pc-control-height);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--pc-control);
  text-underline-offset: 0.25em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pc-link-btn:hover {
  text-decoration-color: currentColor;
}

/* Label swap: every label occupies the same grid cell, so the control is
   always as wide as its longest label and never moves its neighbours. */
.pc-swap {
  display: inline-grid;
}
.pc-swap > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pc-space-2);
  transition:
    opacity var(--pc-fast) var(--pc-ease),
    visibility var(--pc-fast);
}
.pc-swap > span[data-active="false"] {
  visibility: hidden;
  opacity: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root *,
  :host *,
  :root *::before,
  :root *::after {
    transition-duration: 1ms !important;
    animation: none !important;
  }
}

/* Theme toggle (theme.js). The slot is pre-sized so the button causes no shift. */
.pc-theme-slot {
  display: inline-flex;
  flex: none;
  width: var(--pc-control-height);
  height: var(--pc-control-height);
}
.pc-theme,
.pc-theme[aria-pressed="true"] {
  width: 100%;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--pc-ink-muted);
}
.pc-theme:hover {
  background: var(--pc-sunken);
  color: var(--pc-ink);
}
.pc-theme svg {
  width: 1.125rem;
  height: 1.125rem;
}
/* Show the theme the button switches to. */
.pc-theme .pc-sun,
:root[data-theme="dark"] .pc-theme .pc-moon {
  display: none;
}
:root[data-theme="dark"] .pc-theme .pc-sun {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pc-theme .pc-sun {
    display: block;
  }
  :root:not([data-theme]) .pc-theme .pc-moon {
    display: none;
  }
}
@media (scripting: none) {
  .pc-theme-slot {
    display: none;
  }
}