/** * Rustify design tokens — single source of truth. * Imported by frontend/, client/, doc/. * Colour theme: terracotta (--toddyi-primary / --toddyi-secondary). */ :root { /* Brand */ --toddyi-primary: #b0764a; --toddyi-primary-dark: #8a5732; --toddyi-primary-light: #c9936b; --toddyi-secondary: #d8a878; --toddyi-accent-gold: #e0a800; --toddyi-accent-green: #2e9e5b; --toddyi-accent-cyan: #e6bb8e; /* Semantic */ --toddyi-success: #2e9e5b; /* A warm red. The previous #d81b60 was Material pink and read as a different product next to the terracotta palette. Still clearly not --toddyi-primary (#b0764a), which is what an error colour has to be. */ --toddyi-error: #c0392b; --toddyi-warning: #e0a800; --toddyi-info: #b0764a; /* Text */ --toddyi-text-primary: rgba(255, 255, 255, 0.92); --toddyi-text-secondary: rgba(255, 255, 255, 0.72); --toddyi-text-muted: rgba(255, 255, 255, 0.55); --toddyi-text-inverse: #0f172a; --toddyi-text-on-dark: #ffffff; /* Surfaces */ --toddyi-bg-gradient: linear-gradient( 135deg, var(--toddyi-primary) 0%, var(--toddyi-primary-dark) 100% ); --toddyi-gradient-primary: linear-gradient( 45deg, var(--toddyi-primary), var(--toddyi-secondary) ); --toddyi-gradient-header: linear-gradient( 135deg, var(--toddyi-primary-dark) 0%, var(--toddyi-primary) 55%, var(--toddyi-primary-light) 100% ); --toddyi-surface-glass: rgba(15, 23, 42, 0.6); --toddyi-surface-overlay: rgba(0, 0, 0, 0.85); --toddyi-surface-overlay-soft: rgba(0, 0, 0, 0.8); --toddyi-surface-muted: rgba(255, 255, 255, 0.1); --toddyi-surface-cream: #fffbeb; --toddyi-border-subtle: rgba(255, 255, 255, 0.1); --toddyi-border-accent: color-mix( in srgb, var(--toddyi-secondary) 45%, transparent ); --toddyi-border-strong: rgba(255, 255, 255, 0.2); /* Grid */ --toddyi-grid-line: rgba(255, 255, 255, 0.05); /* Typography */ /* The face for the current locale's script, set on by typography_scripts.css. Latin is the default because ten of the fifteen locales use it. The system stack behind it is what renders while the web font loads, and what renders if it never does. (#214) */ --toddyi-font-script: "Inter"; --toddyi-font-sans: var(--toddyi-font-script), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --toddyi-font-serif: Georgia, "Times New Roman", serif; --toddyi-font-doc: var(--toddyi-font-sans); /* Spacing */ --toddyi-space-1: 0.25rem; --toddyi-space-2: 0.5rem; --toddyi-space-3: 0.75rem; --toddyi-space-4: 1rem; --toddyi-space-6: 1.5rem; --toddyi-space-8: 2rem; --toddyi-page-padding: 1rem; --toddyi-card-radius: 0.75rem; --toddyi-radius-pill: 999px; /* Motion */ --toddyi-transition-fast: 0.15s ease; --toddyi-transition-base: 0.25s ease; --toddyi-transition-slow: 0.45s ease; /* Z-index */ --toddyi-z-background: -1; --toddyi-z-overlay: 10; --toddyi-z-modal: 100; --toddyi-z-toast: 200; /* Doc site (light) */ --toddyi-doc-bg: #f3ece0; --toddyi-doc-surface: #fbf7ef; --toddyi-doc-border: #ddd0ba; --toddyi-doc-accent-light: #ebe2d2; --toddyi-doc-text: #3b342a; --toddyi-doc-text-muted: #8a7f6d; --toddyi-doc-text-footer: #8a7f6d; --toddyi-doc-radius: 14px; --toddyi-doc-shadow-sm: 0 1px 4px rgba(60, 45, 20, 0.06); --toddyi-doc-shadow: 0 4px 20px rgba(60, 45, 20, 0.07); --toddyi-doc-shadow-lg: 0 12px 36px rgba(60, 45, 20, 0.11); --toddyi-doc-transition: 0.2s ease; /* Application surfaces and effects */ --toddyi-app-overlay: rgba(0, 0, 0, 0.45); --toddyi-app-shadow: rgba(0, 0, 0, 0.3); --toddyi-app-shadow-soft: rgba(0, 0, 0, 0.22); --toddyi-logo-shadow: rgba(0, 0, 0, 0.1); --toddyi-modal-overlay: rgba(20, 12, 4, 0.55); --toddyi-hourglass-shadow: rgba(0, 0, 0, 0.12); --toddyi-hourglass-frame: #5e3617; --toddyi-hourglass-highlight: rgba(255, 240, 220, 0.4); --toddyi-hourglass-rivet: #6b3f1c; --toddyi-hourglass-plate-shadow: rgba(40, 20, 5, 0.35); --toddyi-hourglass-engraving: #5a3a1c; --toddyi-hourglass-engraving-shadow: rgba(255, 226, 186, 0.6); --toddyi-hourglass-sand: #cf9235; --toddyi-hourglass-sand-light: #ecc472; --toddyi-hourglass-gradient-light: #eabb87; --toddyi-hourglass-gradient-mid: #c88a4e; --toddyi-hourglass-gradient-dark: #8f5527; --toddyi-priority-fallback: #6c5ce7; --toddyi-habit-water: #00b894; --toddyi-countdown-birthday: #e17055; --toddyi-countdown-deadline: #0984e3; /* Date-time picker */ --toddyi-picker-light-bg: #ffffff; --toddyi-picker-light-border: #d1d5db; --toddyi-picker-light-field-border: #cccccc; --toddyi-picker-light-text: #1f2937; --toddyi-picker-light-hover: #f3f4f6; --toddyi-picker-light-muted: #6b7280; --toddyi-picker-light-dim: #9ca3af; --toddyi-picker-dark-bg: #1e293b; --toddyi-picker-dark-field-bg: #0f172a; --toddyi-picker-dark-border: #334155; --toddyi-picker-dark-text: #f8fafc; --toddyi-picker-dark-secondary: #e2e8f0; --toddyi-picker-dark-muted: #94a3b8; --toddyi-picker-dark-dim: #64748b; /* External brand colors */ --toddyi-google-red: #ea4335; --toddyi-google-blue: #4285f4; --toddyi-google-yellow: #fbbc05; --toddyi-google-green: #34a853; /* Microsoft's four squares, for the sign-in button. Brand values, like Google's above: they are not ours to restyle. (#232) */ --toddyi-microsoft-red: #f25022; --toddyi-microsoft-green: #7fba00; --toddyi-microsoft-blue: #00a4ef; --toddyi-microsoft-yellow: #ffb900; /* Email and static document colors */ --toddyi-email-text: #3a3128; --toddyi-email-heading: #241f19; --toddyi-email-muted: #8a7f70; --toddyi-email-footer: #9a8f7e; --toddyi-email-divider: #ececf3; --toddyi-email-shadow: rgba(60, 45, 20, 0.08); --toddyi-alert-text: #dc2626; --toddyi-alert-strong: #b91c1c; --toddyi-alert-bg: #fff5f5; --toddyi-alert-border: #fca5a5; --toddyi-support-success: #2e7d32; --toddyi-support-error: #c62828; --toddyi-error-page-bg: #ffffff; --toddyi-error-page-text: #261b23; --toddyi-error-page-code: #f0eff0; --toddyi-error-page-accent: #d30001; --toddyi-error-page-dark-bg: #101010; --toddyi-error-page-dark-text: #e0e0e0; --toddyi-error-page-dark-code: #2c2c2c; --toddyi-error-page-dark-accent: #ff6161; --toddyi-offline-text: #111827; --toddyi-offline-muted: #475569; --toddyi-offline-bg: #f8fafc; /* Doc legacy aliases */ --bg: var(--toddyi-doc-bg); --surface: var(--toddyi-doc-surface); --border: var(--toddyi-doc-border); --primary: var(--toddyi-primary); --primary-mid: var(--toddyi-primary-dark); --accent: var(--toddyi-secondary); --accent-light: var(--toddyi-doc-accent-light); --text: var(--toddyi-doc-text); --text-muted: var(--toddyi-doc-text-muted); --text-on-dark: var(--toddyi-text-on-dark); --text-footer: var(--toddyi-doc-text-footer); --radius: var(--toddyi-doc-radius); --shadow-sm: var(--toddyi-doc-shadow-sm); --shadow: var(--toddyi-doc-shadow); --shadow-lg: var(--toddyi-doc-shadow-lg); --transition: var(--toddyi-doc-transition); --main-blue: var(--toddyi-primary); --light-blue: var(--toddyi-doc-accent-light); --accent-blue: var(--toddyi-secondary); --border-color: var(--toddyi-doc-border); --gray-text: var(--toddyi-doc-text-muted); } :root, :root:not([data-theme="dark"]) { --pico-primary: var(--toddyi-primary); --pico-primary-hover: #98623b; --pico-primary-focus: rgba(176, 118, 74, 0.25); --pico-primary-inverse: var(--toddyi-text-on-dark); /* Pico buttons take their fill from these; keep them on-brand (var() is late-bound, so this follows --pico-primary in both themes). (#98) */ --pico-primary-background: var(--pico-primary); --pico-primary-border: var(--pico-primary); --pico-primary-hover-background: var(--pico-primary-hover); --pico-primary-hover-border: var(--pico-primary-hover); --pico-background-color: var(--toddyi-doc-bg); --pico-card-background-color: var(--toddyi-doc-surface); --pico-card-sectioning-background-color: var(--toddyi-doc-surface); --pico-color: var(--toddyi-doc-text); --pico-muted-color: var(--toddyi-doc-text-muted); --pico-muted-border-color: #e3d8c5; --pico-secondary-background: var(--toddyi-doc-accent-light); --pico-form-element-background-color: var(--toddyi-doc-surface); --pico-form-element-border-color: var(--toddyi-doc-border); --pico-form-element-disabled-background-color: var(--toddyi-doc-accent-light); --pico-border-radius: 0.6rem; --pico-form-element-spacing-vertical: 0.65rem; /* Pico ships a full palette for every role it defines. Overriding only the ones we happened to notice left the rest rendering in Pico's own colours — a slate-blue "secondary" button in a terracotta app. Anything a component or Markdown output can reach gets a brand value here. (#202) */ --pico-secondary: var(--toddyi-primary-dark); --pico-secondary-hover: var(--toddyi-primary); --pico-secondary-focus: rgba(138, 87, 50, 0.25); --pico-secondary-inverse: var(--toddyi-text-on-dark); --pico-secondary-border: var(--pico-secondary); --pico-secondary-underline: rgba(138, 87, 50, 0.5); --pico-secondary-hover-background: var(--pico-secondary-hover); --pico-secondary-hover-border: var(--pico-secondary-hover); --pico-secondary-hover-underline: var(--pico-secondary-hover); --pico-contrast: var(--toddyi-doc-text); --pico-contrast-hover: var(--toddyi-primary-dark); --pico-contrast-focus: rgba(138, 87, 50, 0.25); --pico-contrast-inverse: var(--toddyi-text-on-dark); --pico-contrast-background: var(--pico-contrast); --pico-contrast-border: var(--pico-contrast); --pico-contrast-underline: rgba(60, 45, 20, 0.5); --pico-contrast-hover-background: var(--pico-contrast-hover); --pico-contrast-hover-border: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover); /* Reachable from task notes: Redcarpet emits del, ins, mark and blockquote. */ --pico-del-color: var(--toddyi-error); --pico-ins-color: var(--toddyi-success); --pico-mark-background-color: color-mix(in srgb, var(--toddyi-accent-gold) 30%, transparent); --pico-mark-color: var(--toddyi-doc-text); --pico-blockquote-border-color: var(--toddyi-secondary); --pico-blockquote-footer-color: var(--toddyi-doc-text-muted); --pico-code-background-color: var(--toddyi-doc-accent-light); --pico-code-color: var(--toddyi-doc-text); --pico-code-kbd-background-color: var(--toddyi-doc-text); --pico-code-kbd-color: var(--toddyi-doc-surface); /* Pico's remaining colour roles were slate-grey and slate-blue: headings, form states, switches, the selection highlight. Each one our CSS touches now says which brand value it means. (#202) */ --pico-h1-color: var(--pico-color); --pico-h2-color: var(--pico-color); --pico-h3-color: var(--pico-color); --pico-h4-color: var(--pico-color); --pico-h5-color: var(--toddyi-doc-text-muted); --pico-h6-color: var(--toddyi-doc-text-muted); --pico-form-element-color: var(--pico-color); --pico-form-element-active-background-color: var(--toddyi-doc-surface); --pico-form-element-placeholder-color: var(--toddyi-doc-text-muted); --pico-form-element-selected-background-color: var(--toddyi-doc-accent-light); --pico-form-element-invalid-border-color: var(--toddyi-error); --pico-form-element-invalid-active-border-color: var(--toddyi-error); --pico-form-element-valid-border-color: var(--toddyi-success); --pico-form-element-valid-active-border-color: var(--toddyi-success); --pico-dropdown-background-color: var(--toddyi-doc-surface); --pico-dropdown-border-color: var(--toddyi-doc-border); --pico-dropdown-hover-background-color: var(--toddyi-doc-accent-light); --pico-modal-overlay-background-color: rgba(60, 45, 20, 0.5); --pico-primary-underline: rgba(176, 118, 74, 0.5); --pico-progress-background-color: var(--toddyi-doc-accent-light); --pico-range-border-color: var(--toddyi-doc-border); --pico-range-active-border-color: var(--toddyi-secondary); --pico-switch-background-color: var(--toddyi-doc-border); --pico-switch-checked-background-color: var(--pico-primary); --pico-switch-color: var(--toddyi-text-on-dark); --pico-table-row-stripped-background-color: color-mix(in srgb, var(--toddyi-primary) 4%, transparent); --pico-table-border-color: var(--toddyi-doc-border); --pico-text-selection-color: rgba(176, 118, 74, 0.25); /* The page's body text colour, safe to use inside a button. Pico's button rule sets --pico-color: var(--pico-primary-inverse) on the element itself, so `color: var(--pico-color)` inside a