/* * Field Notes design tokens — shared source of truth for the Quiz Master * palette refresh. Templates repoint their *existing* CSS variables at * these values; nothing here renames a variable a template already uses. * * Dark is the primary/default experience (bare :root). Light values live * under [data-theme="light"] so each template's own theme-toggle logic * (static/js/theme.js, which sets data-theme on ) picks them up * without any change to that mechanism. */ :root { /* dark (default) */ --fn-chalkboard: #14170F; /* page background */ --fn-chalkboard-raised: #1B1F16; /* cards/panels */ --fn-chalkboard-sunken: #0E100B; /* recessed wells, code blocks */ --fn-chalk: #ECE8DA; /* primary text */ --fn-chalk-dim: #A9A594; /* secondary text */ --fn-chalk-faint: #726E5C; /* tertiary text, labels */ --fn-rule: rgba(236, 232, 218, 0.14); --fn-rule-strong: rgba(236, 232, 218, 0.26); --fn-highlighter: #E0A934; /* primary accent */ --fn-highlighter-ink: #14170F; /* text color placed on top of the accent */ --fn-moss: #8FB088; /* mastery / recall */ --fn-rust: #D08768; /* application / review-due */ --fn-glass: rgba(255, 255, 255, 0.03); --fn-gradient: linear-gradient(135deg, #E0A934, #D08768); --fn-text-muted: #726E5C; /* shared muted/footer text — replaces 5x duplicated literal #64748B */ /* type stacks — shared across every template that loads fonts.css */ --fn-font-body: 'Heebo', 'Frank Ruhl Libre', system-ui, -apple-system, sans-serif; --fn-font-mono: 'IBM Plex Mono', ui-monospace, 'Heebo', monospace; } [data-theme="light"] { --fn-chalkboard: #E7E2D3; --fn-chalkboard-raised: #F2EEE1; --fn-chalkboard-sunken: #DAD4C1; --fn-chalk: #232319; --fn-chalk-dim: #58543A; --fn-chalk-faint: #8A8468; --fn-rule: rgba(35, 35, 25, 0.14); --fn-rule-strong: rgba(35, 35, 25, 0.26); --fn-highlighter: #A8781F; --fn-highlighter-ink: #FBF8EF; --fn-moss: #4F7A48; --fn-rust: #A34B2C; --fn-glass: rgba(0, 0, 0, 0.03); --fn-gradient: linear-gradient(135deg, #A8781F, #A34B2C); --fn-text-muted: #8A8468; } /* CTA clip direction: RTL clips bottom-left corner (default, defined per-template). LTR flips all primary CTAs to bottom-right corner, then restores no-clip variants. */ [dir="ltr"] .btn, [dir="ltr"] .btn-primary, [dir="ltr"] .empty-state-cta, [dir="ltr"] .modal-btn-primary, [dir="ltr"] .cta-button, [dir="ltr"] .nav-cta, [dir="ltr"] .cta-btn { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); } /* Restore flat corners for non-CTA button variants (must come after the rule above). */ [dir="ltr"] .btn-outline, [dir="ltr"] .btn-secondary, [dir="ltr"] .btn-danger, [dir="ltr"] .btn-warning, [dir="ltr"] .btn-locked, [dir="ltr"] .cr-purchase-btn { clip-path: none; }