/*
 * Design tokens — the single source of truth for the site's visual language.
 *
 * Both halves of the site read this file:
 *   - public/landing.html links it directly (<link href="/tokens.css">)
 *   - the React app inlines it via src/index.css, and tailwind.config.js
 *     maps utility names (bg-app, text-accent, font-serif, …) onto it
 *
 * Change a value here and it changes everywhere. Never hardcode these
 * hex values in components or page styles — reference the variable.
 */
:root {
    /* Light theme — the default "paper" look */
    --bg-app: #f5f5f3;           /* cool off-white paper */
    --surface: #ffffff;          /* cards, modals, inputs */
    --border: #e0e0e0;
    --text: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;

    /* Accent — one green: base for dark backgrounds, strong for text on
       light backgrounds, plus two derived tints for badges/chips */
    --accent: #22c55e;
    --accent-strong: #16a34a;
    --accent-subtle: rgba(34, 197, 94, 0.13);  /* badge / pill background */
    --accent-border: rgba(34, 197, 94, 0.25);  /* hairline around accent chips */

    /* Dark theme — warm dark gray sections and dark mode */
    --dark-bg: #1a1a1a;
    --dark-bg-elevated: #222222;
    --dark-card: #2a2a2a;
    --dark-border: #3a3a3a;
    --dark-text: #f5f5f3;
    --dark-text-secondary: #a0a0a0;
    --dark-text-muted: #666666;
}