@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;
  --stack-protect-fg: #FFEEDD;
  --stack-protect-bg: linear-gradient(155deg, #B85A3A 0%, #6E2818 100%);
  --stack-vault-fg: #E5EEFA;
  --stack-vault-bg: linear-gradient(155deg, #2A3A4D 0%, #0F1620 100%);
  --stack-sync-fg: #E6F2DE;
  --stack-sync-bg: linear-gradient(155deg, #3A4E3A 0%, #15241A 100%);
  --stack-appear-fg: #F4E9D2;
  --stack-appear-bg: linear-gradient(155deg, #5A4A2C 0%, #281D10 100%);
  --stack-shortcut-fg: #E4E0D6;
  --stack-shortcut-bg: linear-gradient(155deg, #3A3A45 0%, #1A1A22 100%);
  --stack-pro-fg: #FFF1DD;
  --stack-pro-bg: linear-gradient(155deg, #C2884A 0%, #6E3E1A 100%);
  --stack-feedback-fg: #EEE4F2;
  --stack-feedback-bg: linear-gradient(155deg, #4A3A4E 0%, #1D1424 100%);
  --stack-card-radius: 16px;
  --stack-tab-h: 56px;
  --stack-tab-overlap: 14px;
  --stack-pad: 14px;
  --stack-spring: cubic-bezier(0.18, 0.9, 0.22, 1.02);
  /* 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 {
  /* Warm parchment restoration — pixel-sampled from reference screenshots.
     Outer bg is hsl(50,16%,93%), card surfaces shift to hsl(35,36-49%,91-92%).
     The two hue families are intentional — do not normalize them to one hue. */
  --bg: #EFEEE9;
  --s1: #F0E9DF;
  --s2: #F5EDE2;
  --s3: #EEE7DD;
  --bg-1: var(--s1);
  --bg-2: var(--s2);
  --bg-3: var(--s3);
  --t0: #1A1208;
  --t1: #3D2E18;
  --t2: #A8A099;
  --t3: #DDD5CB;
  --t4: rgba(26, 18, 8, 0.06);
  --surface-card: #F0E9DF;
  --surface-elevated: rgba(245, 237, 226, 0.97);
  --shell-top-solid: rgba(239, 238, 233, 0.98);
  --shell-top-fade: rgba(245, 237, 226, 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.10), 0 14px 48px rgba(80, 56, 32, 0.10), 0 0 0 1px rgba(26, 18, 8, 0.05);
  --peach-rune-idle: rgba(26, 18, 8, 0.12);
  --peach-ghost-opacity: 0.06;

  /* Light-only semantic tokens from restoration brief */
  --peach-bg-card: #F0E9DF;
  --peach-bg-row: #F2EBE1;
  --peach-bg-input: #EEE7DD;
  --peach-bg-elevated: #F5EDE2;
  --peach-bg-search: #F2EBE1;
  --peach-text-label: #79766F;
  --peach-text-link: #B87155;
  --peach-text-dim: #9E9890;
  --peach-border-subtle: #E8E2D8;
  --peach-border-strong: #C4BAB0;
  --peach-breach-bg: #F1E5D9;
  --peach-breach-text: #DA6931;
  --peach-warning-text: #DA6931;
}

/* ─── Text size scaling ────────────────────────────────────────────────
   Implemented via `zoom` on html so every existing px-based font-size in
   popup.css scales proportionally without rewriting individual rules.
   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; }
/* Zoom on html (not body) for both sizes so Chrome auto-resizes the popup
   window in both directions. Zooming body for small left a visible gap at
   the bottom because the window stayed at full height. Small text needs the
   fixed popup surfaces widened before zoom; otherwise the 320px shell paints
   as 294px and leaves unowned backdrop on the right edge. */
html { background: var(--bg); }
html[data-text-size="large"] { zoom: 1.08; }
html[data-text-size="small"] {
  --peach-popup-scaled-width: 347.826087px;  /* 320 / 0.92 */
  --peach-popup-scaled-height: 565.217391px; /* 520 / 0.92 */
  zoom: 0.92;
  width: var(--peach-popup-scaled-width);
  min-width: var(--peach-popup-scaled-width);
  height: var(--peach-popup-scaled-height);
  min-height: var(--peach-popup-scaled-height);
  overflow: hidden;
}

html[data-text-size="small"] body,
html[data-text-size="small"] #app,
html[data-text-size="small"] #pre-lock,
html[data-text-size="small"] .popup-root,
html[data-text-size="small"] .peach-shell[data-surface="extension"],
html[data-text-size="small"] .peach-screen,
html[data-text-size="small"] .peach-pro-celebration {
  width: var(--peach-popup-scaled-width);
  min-width: var(--peach-popup-scaled-width);
  height: var(--peach-popup-scaled-height);
  min-height: var(--peach-popup-scaled-height);
}

html[data-text-size="small"] .peach-shell[data-surface="extension"] {
  max-height: var(--peach-popup-scaled-height);
}

/* ─── 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;
}