/* Design tokens — single source of truth for color/shadow values. Contrast ratios verified against WCAG 2.1 (see README.md for the calculation method and full numbers). Three theme states: - system (default): follows prefers-color-scheme, no explicit data-theme attribute set. - light / dark (explicit): user override via the toggle, persisted in localStorage, applied via [data-theme="light"|"dark"] on . */ :root { --bg: #eef1ee; --bg-elevated: #ffffff; --card: #e2e7e1; --card-border: rgba(18, 32, 27, 0.16); --rule: rgba(18, 32, 27, 0.18); --ink: #12201b; --ink-soft: #46534c; --ink-faint: #5e6a63; --accent: #806017; --accent-soft: rgba(151, 113, 28, 0.12); --verified: #2c7350; --verified-soft: rgba(44, 115, 80, 0.12); --revoked: #97402a; --revoked-soft: rgba(151, 64, 42, 0.1); --mono-bg: rgba(18, 32, 27, 0.05); --shadow: 0 1px 2px rgba(18, 32, 27, 0.06); --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1512; --bg-elevated: #0f1c17; --card: #15241d; --card-border: rgba(231, 237, 233, 0.12); --rule: rgba(231, 237, 233, 0.14); --ink: #e8ede9; --ink-soft: #aab7af; --ink-faint: #77857d; --accent: #cb9d40; --accent-soft: rgba(203, 157, 64, 0.14); --verified: #57a37c; --verified-soft: rgba(87, 163, 124, 0.14); --revoked: #d9805f; --revoked-soft: rgba(217, 128, 95, 0.12); --mono-bg: rgba(231, 237, 233, 0.06); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } } :root[data-theme="dark"] { --bg: #0b1512; --bg-elevated: #0f1c17; --card: #15241d; --card-border: rgba(231, 237, 233, 0.12); --rule: rgba(231, 237, 233, 0.14); --ink: #e8ede9; --ink-soft: #aab7af; --ink-faint: #77857d; --accent: #cb9d40; --accent-soft: rgba(203, 157, 64, 0.14); --verified: #57a37c; --verified-soft: rgba(87, 163, 124, 0.14); --revoked: #d9805f; --revoked-soft: rgba(217, 128, 95, 0.12); --mono-bg: rgba(231, 237, 233, 0.06); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } :root[data-theme="light"] { --bg: #eef1ee; --bg-elevated: #ffffff; --card: #e2e7e1; --card-border: rgba(18, 32, 27, 0.16); --rule: rgba(18, 32, 27, 0.18); --ink: #12201b; --ink-soft: #46534c; --ink-faint: #5e6a63; --accent: #806017; --accent-soft: rgba(151, 113, 28, 0.12); --verified: #2c7350; --verified-soft: rgba(44, 115, 80, 0.12); --revoked: #97402a; --revoked-soft: rgba(151, 64, 42, 0.1); --mono-bg: rgba(18, 32, 27, 0.05); --shadow: 0 1px 2px rgba(18, 32, 27, 0.06); }