vars.css

1@font-face {2  font-family: "Cormorant Garamond";3  font-weight: 300;4  font-style: italic;5  src: url("/fonts/CormorantGaramond-LightItalic.woff2") format("woff2");6  font-display: block;7}89@font-face {10  font-family: "Cormorant Garamond";11  font-weight: 300;12  font-style: normal;13  src: url("/fonts/CormorantGaramond-Light.woff2") format("woff2");14  font-display: block;15}1617@font-face {18  font-family: "Cormorant Garamond";19  font-weight: 400;20  font-style: normal;21  src: url("/fonts/CormorantGaramond-Regular.woff2") format("woff2");22  font-display: block;23}2425@font-face {26  font-family: "Cormorant Garamond";27  font-weight: 400;28  font-style: italic;29  src: url("/fonts/CormorantGaramond-RegularItalic.woff2") format("woff2");30  font-display: block;31}3233@font-face {34  font-family: "IBM Plex Mono";35  font-weight: 300;36  font-style: normal;37  src: url("/fonts/IBMPlexMono-Light.woff2") format("woff2");38  font-display: optional;39}4041@font-face {42  font-family: "IBM Plex Mono";43  font-weight: 300;44  font-style: italic;45  src: url("/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");46  font-display: optional;47}4849@font-face {50  font-family: "IBM Plex Mono";51  font-weight: 400;52  font-style: normal;53  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");54  font-display: optional;55}5657@font-face {58  font-family: "Inter Variable";59  font-weight: 100 900;60  font-style: normal;61  src: url("/fonts/InterVariable.woff2") format("woff2-variations");62  font-display: optional;63}6465@font-face {66  font-family: "Inter";67  font-weight: 400;68  font-style: normal;69  src: url("/fonts/Inter-Regular.woff2") format("woff2");70  font-display: optional;71}7273@font-face {74  font-family: "PeachScript";75  font-weight: 400;76  font-style: normal;77  src: url("/fonts/PeachScript-Regular.otf") format("opentype");78  font-display: block;79}8081:root {82  --bg: #0C0A06;83  --s1: #131109;84  --s2: #1A1710;85  --t0: #F0E8D8;86  --t1: rgba(240, 232, 216, 0.50);87  --t2: rgba(240, 232, 216, 0.20);88  --t3: rgba(240, 232, 216, 0.07);89  --t4: rgba(240, 232, 216, 0.04);90  --ac: #E8956D;91  --surface-card: rgba(240, 232, 216, 0.02);92  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 8%, transparent);93  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 6%, transparent);94  --breach: rgba(220, 80, 60, 0.7);95  --health: rgba(100, 210, 100, 0.75);96  --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);97  --font-display: "Cormorant Garamond", "Times New Roman", serif;98  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;99  --font-ui: "Inter Variable", "Inter", system-ui, sans-serif;100  /* Body-text scale; multiplied into key font-size declarations so users101     can request small / default / large without breaking dense layouts.102     XL was deliberately excluded — clips Vault and Health. */103  --spring: cubic-bezier(0.16, 1, 0.3, 1);104  --retreat: cubic-bezier(0.4, 0, 1, 1);105  --settle: cubic-bezier(0.34, 1.56, 0.64, 1);106  --peach-bg: var(--bg);107  --peach-s1: var(--s1);108  --peach-s2: var(--s2);109  --peach-t0: var(--t0);110  --peach-t1: var(--t1);111  --peach-t2: var(--t2);112  --peach-t3: var(--t3);113  --peach-t4: var(--t4);114  --peach-text: var(--peach-t4);115  --peach-text-dim: var(--peach-t1);116  --peach-bg-card: var(--surface-card);117  --peach-border: var(--peach-t3);118  --peach-mono: var(--font-mono);119  --peach-accent: var(--ac);120  --peach-glow: #F49C702A;        /* accent bloom behind buttons/illustrations — set by applyAccent() */121  --peach-border-accent: #F49C7024; /* accent-tinted border for active states — set by applyAccent() */122  --peach-breach: var(--breach);123  --peach-health-ok: var(--health);124  --peach-health-bad: var(--breach);125  /* Yellow for transient network misses — the dial didn't reach the peer but126     the alarm will retry. Distinct from breach/red so alarm fatigue doesn't127     train the user to ignore a real indicator. */128  --peach-health-warn: #d8a13a;129  --peach-sync-ok: #5ebd5e;130  --peach-curve-arrival: var(--spring);131  --peach-curve-departure: var(--retreat);132  --peach-curve-settle: var(--settle);133  --peach-dur-80: 80ms;134  --peach-dur-150: 150ms;135  --peach-dur-600: 600ms;136  --peach-copy-clear: 1.4s;137  --peach-ghost-opacity: 0.03;138  --stack-protect-fg: #FFEEDD;139  --stack-protect-bg: linear-gradient(155deg, #B85A3A 0%, #6E2818 100%);140  --stack-vault-fg: #E5EEFA;141  --stack-vault-bg: linear-gradient(155deg, #2A3A4D 0%, #0F1620 100%);142  --stack-sync-fg: #E6F2DE;143  --stack-sync-bg: linear-gradient(155deg, #3A4E3A 0%, #15241A 100%);144  --stack-appear-fg: #F4E9D2;145  --stack-appear-bg: linear-gradient(155deg, #5A4A2C 0%, #281D10 100%);146  --stack-shortcut-fg: #E4E0D6;147  --stack-shortcut-bg: linear-gradient(155deg, #3A3A45 0%, #1A1A22 100%);148  --stack-pro-fg: #FFF1DD;149  --stack-pro-bg: linear-gradient(155deg, #C2884A 0%, #6E3E1A 100%);150  --stack-feedback-fg: #EEE4F2;151  --stack-feedback-bg: linear-gradient(155deg, #4A3A4E 0%, #1D1424 100%);152  --stack-card-radius: 16px;153  --stack-spring: cubic-bezier(0.18, 0.9, 0.22, 1.02);154  /* Tell the browser engine which color schemes the UI knows how to render —155     this gets us correct form-control colors and scrollbar tinting when the156     user follows the system theme. */157  color-scheme: dark light;158}159160.light {161  /* Warm parchment restoration — pixel-sampled from reference screenshots.162     Outer bg is hsl(50,16%,93%), card surfaces shift to hsl(35,36-49%,91-92%).163     The two hue families are intentional — do not normalize them to one hue. */164  --bg: #EFEEE9;165  --s1: #F0E9DF;166  --s2: #F5EDE2;167  --t0: #1A1208;168  --t1: #3D2E18;169  --t2: #A8A099;170  --t3: #DDD5CB;171  --t4: rgba(26, 18, 8, 0.06);172  --surface-card: #F0E9DF;173  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 6%, transparent);174  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 3%, transparent);175  --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);176  --peach-ghost-opacity: 0.06;177178  /* Light-only semantic tokens from restoration brief */179  --peach-bg-card: #F0E9DF;180  --peach-text-dim: #9E9890;181}182183/* ─── Text size scaling ────────────────────────────────────────────────184   Implemented via `zoom` on html so every existing px-based font-size in185   popup.css scales proportionally without rewriting individual rules.186   Capped at 1.08 — large enough to noticeably help, small enough that the187   dense Vault and Health views don't clip the fixed-size popup surface.188   The CSS custom property is also exposed so desktop / mobile builds can189   use a calc() multiplier on layouts that don't fit `zoom` semantics. */190[data-text-size="medium"] { --peach-text-scale: 1; }191[data-text-size="large"]  { --peach-text-scale: 1.08; }192html { background: var(--bg); }193html[data-text-size="large"] { zoom: 1.08; }194195/* ─── Reduced motion ───────────────────────────────────────────────────196   User-explicit setting OR OS-level prefers-reduced-motion both collapse197   transitions and ambient animations to instant. The user-explicit form198   takes precedence and works even when the OS hasn't been configured. */199[data-motion="reduce"] *,200[data-motion="reduce"] *::before,201[data-motion="reduce"] *::after {202  animation-duration: 0.001ms !important;203  animation-delay: 0.001ms !important;204  animation-iteration-count: 1 !important;205  transition-duration: 0.001ms !important;206  transition-delay: 0.001ms !important;207  scroll-behavior: auto !important;208}