@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;
}

: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-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-ui: "Inter Variable", "Inter", system-ui, sans-serif;
  --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-accent: var(--ac);
  --peach-accent-dim: color-mix(in srgb, var(--peach-accent) 25%, transparent);
  --peach-glow: #F49C7077;        /* accent bloom behind buttons/illustrations — set by applyAccent() */
  --peach-surface-tint: #F49C701A; /* accent tint on card surfaces — set by applyAccent() */
  --peach-border-accent: #F49C7066; /* accent-tinted border for active states — set by applyAccent() */
  --peach-breach: var(--breach);
  --peach-health-ok: var(--health);
  --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;
}

.light {
  --bg: #C6B4A0;
  --s1: #BAA793;
  --s2: #AE9A85;
  --s3: #A18D77;
  --bg-1: var(--s1);
  --bg-2: var(--s2);
  --bg-3: var(--s3);
  --t0: #1C1915;
  --t1: rgba(28, 25, 21, 0.65);
  --t2: rgba(28, 25, 21, 0.35);
  --t3: rgba(28, 25, 21, 0.10);
  --t4: rgba(28, 25, 21, 0.05);
  --surface-card: rgba(28, 25, 21, 0.04);
  --surface-elevated: rgba(185, 170, 152, 0.96);
  --shell-top-solid: rgba(210, 196, 178, 0.96);
  --shell-top-fade: rgba(198, 180, 160, 0.96);
  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 12%, transparent);
  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 6%, transparent);
  --copy-shadow: 0 2px 8px rgba(80, 56, 32, 0.22), 0 14px 48px rgba(80, 56, 32, 0.20), 0 0 0 1px rgba(28,25,21,0.06);
}