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: optional;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: optional;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: optional;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: optional;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  --s3: #221F14;86  --bg-1: var(--s1);87  --bg-2: var(--s2);88  --bg-3: var(--s3);89  --t0: #F0E8D8;90  --t1: rgba(240, 232, 216, 0.50);91  --t2: rgba(240, 232, 216, 0.20);92  --t3: rgba(240, 232, 216, 0.07);93  --t4: rgba(240, 232, 216, 0.04);94  --ac: #E8956D;95  --surface-card: rgba(240, 232, 216, 0.02);96  --surface-elevated: rgba(19, 17, 9, 0.88);97  --shell-top-solid: #000000;98  --shell-top-fade: rgba(12, 10, 6, 0.95);99  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 8%, transparent);100  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 6%, transparent);101  --breach: rgba(220, 80, 60, 0.7);102  --health: rgba(100, 210, 100, 0.75);103  --totp-tag: rgba(120, 175, 255, 0.75);104  --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);105  --font-display: "Cormorant Garamond", "Times New Roman", serif;106  --font-display-style: italic;107  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;108  --font-ui: "Inter Variable", "Inter", system-ui, sans-serif;109  /* Body-text scale; multiplied into key font-size declarations so users110     can request small / default / large without breaking dense layouts.111     XL was deliberately excluded — clips Vault and Health. */112  --peach-text-scale: 1;113  --spring: cubic-bezier(0.16, 1, 0.3, 1);114  --retreat: cubic-bezier(0.4, 0, 1, 1);115  --settle: cubic-bezier(0.34, 1.56, 0.64, 1);116  --dur-enter: 500ms;117  --dur-exit: 280ms;118  --dur-micro: 150ms;119  --peach-bg: var(--bg);120  --peach-s1: var(--s1);121  --peach-s2: var(--s2);122  --peach-s3: var(--s3);123  --peach-t0: var(--t0);124  --peach-t1: var(--t1);125  --peach-t2: var(--t2);126  --peach-t3: var(--t3);127  --peach-t4: var(--t4);128  --peach-text: var(--peach-t4);129  --peach-text-dim: var(--peach-t1);130  --peach-bg-card: var(--surface-card);131  --peach-border: var(--peach-t3);132  --peach-mono: var(--font-mono);133  --peach-accent: var(--ac);134  --peach-accent-dim: color-mix(in srgb, var(--peach-accent) 25%, transparent);135  --peach-glow: #F49C702A;        /* accent bloom behind buttons/illustrations — set by applyAccent() */136  --peach-surface-tint: #F49C7009; /* accent tint on card surfaces — set by applyAccent() */137  --peach-border-accent: #F49C7024; /* accent-tinted border for active states — set by applyAccent() */138  --peach-breach: var(--breach);139  --peach-health-ok: var(--health);140  --peach-health-bad: var(--breach);141  --peach-totp-tag: var(--totp-tag);142  --peach-sync-ok: #5ebd5e;143  --peach-sync-busy: #c8a840;144  --peach-sync-off: var(--peach-t2);145  --peach-sync-err: var(--peach-breach);146  --peach-curve-arrival: var(--spring);147  --peach-curve-departure: var(--retreat);148  --peach-curve-settle: var(--settle);149  --peach-dur-80: 80ms;150  --peach-dur-150: 150ms;151  --peach-dur-280: 280ms;152  --peach-dur-380: 380ms;153  --peach-dur-500: 500ms;154  --peach-dur-600: 600ms;155  --peach-copy-clear: 1.4s;156  --peach-rune-idle: rgba(245, 240, 234, 0.16);157  --peach-ghost-opacity: 0.03;158  /* Tell the browser engine which color schemes the UI knows how to render —159     this gets us correct form-control colors and scrollbar tinting in the160     WebView when the user follows the system theme. */161  color-scheme: dark light;162}163164.light {165  /* Warm parchment restoration — pixel-sampled from reference screenshots.166     Outer bg is hsl(50,16%,93%), card surfaces shift to hsl(35,36-49%,91-92%).167     The two hue families are intentional — do not normalize them to one hue. */168  --bg: #EFEEE9;169  --s1: #F0E9DF;170  --s2: #F5EDE2;171  --s3: #EEE7DD;172  --bg-1: var(--s1);173  --bg-2: var(--s2);174  --bg-3: var(--s3);175  --t0: #1A1208;176  --t1: #3D2E18;177  --t2: #A8A099;178  --t3: #DDD5CB;179  --t4: rgba(26, 18, 8, 0.06);180  --surface-card: #F0E9DF;181  --surface-elevated: rgba(245, 237, 226, 0.97);182  --shell-top-solid: rgba(239, 238, 233, 0.98);183  --shell-top-fade: rgba(245, 237, 226, 0.96);184  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 6%, transparent);185  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 3%, transparent);186  --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);187  --peach-rune-idle: rgba(26, 18, 8, 0.12);188  --peach-ghost-opacity: 0.06;189190  /* Light-only semantic tokens from restoration brief */191  --peach-bg-card: #F0E9DF;192  --peach-bg-row: #F2EBE1;193  --peach-bg-input: #EEE7DD;194  --peach-bg-elevated: #F5EDE2;195  --peach-bg-search: #F2EBE1;196  --peach-text-label: #79766F;197  --peach-text-link: #B87155;198  --peach-text-dim: #9E9890;199  --peach-border-subtle: #E8E2D8;200  --peach-border-strong: #C4BAB0;201  --peach-breach-bg: #F1E5D9;202  --peach-breach-text: #DA6931;203  --peach-warning-text: #DA6931;204}205206/* ─── Text size scaling ────────────────────────────────────────────────207   Implemented via the `zoom` property on the popup body so every existing208   px-based font-size in popup.css scales proportionally without rewriting209   any individual rule. Capped at 1.08 — large enough to noticeably help,210   small enough that the dense Vault and Health views don't clip the211   fixed-size popup surface. The CSS custom property is also exposed so212   desktop / mobile builds can use a calc() multiplier on layouts that213   don't fit `zoom` semantics. */214[data-text-size="small"]  { --peach-text-scale: 0.92; }215[data-text-size="medium"] { --peach-text-scale: 1; }216[data-text-size="large"]  { --peach-text-scale: 1.08; }217/* Zoom on html (not body) for both sizes so Chrome auto-resizes the popup218   window in both directions. Zooming body for small left a visible gap at219   the bottom because the window stayed at full height. */220html { background: var(--bg); }221html[data-text-size="large"] { zoom: 1.08; }222html[data-text-size="small"] { zoom: 0.92; }223224/* ─── Reduced motion ───────────────────────────────────────────────────225   User-explicit setting OR OS-level prefers-reduced-motion both collapse226   transitions and ambient animations to instant. The user-explicit form227   takes precedence and works even when the OS hasn't been configured. */228[data-motion="reduce"] *,229[data-motion="reduce"] *::before,230[data-motion="reduce"] *::after {231  animation-duration: 0.001ms !important;232  animation-delay: 0.001ms !important;233  animation-iteration-count: 1 !important;234  transition-duration: 0.001ms !important;235  transition-delay: 0.001ms !important;236  scroll-behavior: auto !important;237}