@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 300;
  font-style: italic;
  src: url("/fonts/CormorantGaramond-LightItalic.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 300;
  font-style: normal;
  src: url("/fonts/CormorantGaramond-Light.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 400;
  font-style: normal;
  src: url("/fonts/CormorantGaramond-Regular.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 400;
  font-style: italic;
  src: url("/fonts/CormorantGaramond-RegularItalic.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 300;
  font-style: normal;
  src: url("/fonts/IBMPlexMono-Light.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 300;
  font-style: italic;
  src: url("/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-style: normal;
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "Inter Variable";
  font-weight: 100 900;
  font-style: normal;
  src: url("/fonts/InterVariable.woff2") format("woff2-variations");
  font-display: optional;
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "PeachScript";
  font-weight: 400;
  font-style: normal;
  src: url("/fonts/PeachScript-Regular.otf") format("opentype");
  font-display: block;
}

:root {
  --bg: #0C0A06;
  --s1: #131109;
  --s2: #1A1710;
  --s3: #221F14;
  --bg-1: var(--s1);
  --bg-2: var(--s2);
  --bg-3: var(--s3);
  --t0: #F0E8D8;
  --t1: rgba(240, 232, 216, 0.50);
  --t2: rgba(240, 232, 216, 0.20);
  --t3: rgba(240, 232, 216, 0.07);
  --t4: rgba(240, 232, 216, 0.04);
  --ac: #E8956D;
  --surface-card: rgba(240, 232, 216, 0.02);
  --surface-elevated: rgba(19, 17, 9, 0.88);
  --shell-top-solid: #000000;
  --shell-top-fade: rgba(12, 10, 6, 0.95);
  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 8%, transparent);
  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 6%, transparent);
  --breach: rgba(220, 80, 60, 0.7);
  --health: rgba(100, 210, 100, 0.75);
  --totp-tag: rgba(120, 175, 255, 0.75);
  --copy-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 14px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(240,232,216,0.04);
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-display-style: italic;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-ui: "Inter Variable", "Inter", system-ui, sans-serif;
  /* Body-text scale; multiplied into key font-size declarations so users
     can request small / default / large without breaking dense layouts.
     XL was deliberately excluded — clips Vault and Health. */
  --peach-text-scale: 1;
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --retreat: cubic-bezier(0.4, 0, 1, 1);
  --settle: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-enter: 500ms;
  --dur-exit: 280ms;
  --dur-micro: 150ms;
  --peach-bg: var(--bg);
  --peach-s1: var(--s1);
  --peach-s2: var(--s2);
  --peach-s3: var(--s3);
  --peach-t0: var(--t0);
  --peach-t1: var(--t1);
  --peach-t2: var(--t2);
  --peach-t3: var(--t3);
  --peach-t4: var(--t4);
  --peach-text: var(--peach-t4);
  --peach-text-dim: var(--peach-t1);
  --peach-bg-card: var(--surface-card);
  --peach-border: var(--peach-t3);
  --peach-mono: var(--font-mono);
  --peach-accent: var(--ac);
  --peach-accent-dim: color-mix(in srgb, var(--peach-accent) 25%, transparent);
  --peach-glow: #F49C702A;        /* accent bloom behind buttons/illustrations — set by applyAccent() */
  --peach-surface-tint: #F49C7009; /* accent tint on card surfaces — set by applyAccent() */
  --peach-border-accent: #F49C7024; /* accent-tinted border for active states — set by applyAccent() */
  --peach-breach: var(--breach);
  --peach-health-ok: var(--health);
  --peach-health-bad: var(--breach);
  --peach-totp-tag: var(--totp-tag);
  --peach-sync-ok: #5ebd5e;
  --peach-sync-busy: #c8a840;
  --peach-sync-off: var(--peach-t2);
  --peach-sync-err: var(--peach-breach);
  --peach-curve-arrival: var(--spring);
  --peach-curve-departure: var(--retreat);
  --peach-curve-settle: var(--settle);
  --peach-dur-80: 80ms;
  --peach-dur-150: 150ms;
  --peach-dur-280: 280ms;
  --peach-dur-380: 380ms;
  --peach-dur-500: 500ms;
  --peach-dur-600: 600ms;
  --peach-copy-clear: 1.4s;
  --peach-rune-idle: rgba(245, 240, 234, 0.16);
  --peach-ghost-opacity: 0.03;
  /* Tell the browser engine which color schemes the UI knows how to render —
     this gets us correct form-control colors and scrollbar tinting in the
     WebView when the user follows the system theme. */
  color-scheme: dark light;
}

.light {
  /* v3: warm toasted linen — hsl(29°, 26–28%, 72–84%)
     User-selected base: hsl(29, 28%, 77%). Elevated surfaces step +4–7%,
     sunken surfaces step −5%. Peach accent reads vibrant against this base. */
  --bg: #C9A882;
  --s1: #D2B48C;
  --s2: #D9BF98;
  --s3: #BC9B72;
  --bg-1: var(--s1);
  --bg-2: var(--s2);
  --bg-3: var(--s3);
  --t0: #1A1208;
  --t1: #2E2010;
  --t2: #6B4E30;
  --t3: rgba(168, 132, 94, 0.4);
  --t4: rgba(26, 18, 8, 0.06);
  --surface-card: rgba(26, 18, 8, 0.03);
  --surface-elevated: rgba(210, 180, 140, 0.97);
  --shell-top-solid: rgba(201, 168, 130, 0.98);
  --shell-top-fade: rgba(210, 180, 140, 0.96);
  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 6%, transparent);
  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 3%, transparent);
  --copy-shadow: 0 2px 8px rgba(80, 56, 32, 0.15), 0 14px 48px rgba(80, 56, 32, 0.15), 0 0 0 1px rgba(26, 18, 8, 0.06);
  --peach-rune-idle: rgba(26, 18, 8, 0.16);
  /* darker base: watermark stays subtle at slightly lower opacity than v2 */
  --peach-ghost-opacity: 0.11;
}

/* ─── Text size scaling ────────────────────────────────────────────────
   Implemented via the `zoom` property on the popup body so every existing
   px-based font-size in popup.css scales proportionally without rewriting
   any individual rule. Capped at 1.08 — large enough to noticeably help,
   small enough that the dense Vault and Health views don't clip the
   fixed-size popup surface. The CSS custom property is also exposed so
   desktop / mobile builds can use a calc() multiplier on layouts that
   don't fit `zoom` semantics. */
[data-text-size="small"]  { --peach-text-scale: 0.92; }
[data-text-size="medium"] { --peach-text-scale: 1; }
[data-text-size="large"]  { --peach-text-scale: 1.08; }
/* Large: zoom on html so Chrome auto-resizes the popup window upward.
   Small: zoom on body instead — Chrome cannot shrink the popup below its
   minimum width, so zooming html for small leaves click coordinates misaligned.
   Zooming body keeps the window fixed and coordinate scaling stays correct.
   The html background fill prevents a bare strip at the edges of the scaled body. */
html { background: var(--bg); }
html[data-text-size="large"]       { zoom: 1.08; }
html[data-text-size="small"] body  { zoom: 0.92; }

/* ─── Reduced motion ───────────────────────────────────────────────────
   User-explicit setting OR OS-level prefers-reduced-motion both collapse
   transitions and ambient animations to instant. The user-explicit form
   takes precedence and works even when the OS hasn't been configured. */
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0.001ms !important;
  scroll-behavior: auto !important;
}