/* MyTravels — design tokens. Drop this at the top of app/static/css/custom.css. Every component CSS rule MUST read colors from these variables. Flip the data-theme attribute on to swap themes. */ :root, :root[data-theme="light"] { /* Color */ --bg: #fafaf7; --paper: #ffffff; --paper-2: #f6f1e7; --ink: #13110f; --ink-2: #5b554d; --ink-3: #9a9286; --line: #ece7dc; --line-2: #dcd5c4; --accent: #c54932; --accent-soft: #fae6dc; --blue: #1f5f9b; --green: #2f7a4f; --gold: #b78a2c; --warm: #e0a458; --danger: #a93621; /* Type families */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Type scale (size / line-height / letter-spacing) */ --fs-display-1: 56px; --fs-display-2: 38px; --fs-display-3: 26px; --fs-h4: 15px; --fs-body: 14px; --fs-small: 12.5px; --fs-label: 10.5px; --fs-data: 13px; /* Spacing (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px; /* Radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 99px; /* Shadows — used sparingly */ --sh-1: 0 1px 0 rgba(0,0,0,0.02); --sh-2: 0 8px 24px -12px rgba(40,30,15,0.18); --sh-3: 0 18px 48px -20px rgba(40,30,15,0.25); /* Motion */ --t-fast: 120ms; --t-med: 200ms; --t-slow: 400ms; --easing: cubic-bezier(0.2, 0.7, 0.2, 1); } :root[data-theme="dark"] { --bg: #0c2138; --paper: #102a47; --paper-2: #0e2540; --ink: #f1edda; --ink-2: #bdcadb; --ink-3: #7a8ea8; --line: #1d3e63; --line-2: #274e7c; --accent: #ff8c5a; --accent-soft: #1f3e63; --blue: #5fb3ff; --green: #5fcf8f; --gold: #f0c34d; --warm: #d99a4e; --danger: #ff6b56; /* Dark-mode shadows are nearly invisible; use rims instead. */ --sh-1: 0 0 0 1px rgba(255,255,255,0.03); --sh-2: 0 8px 24px -12px rgba(0,0,0,0.6); --sh-3: 0 18px 48px -20px rgba(0,0,0,0.7); } /* Honor OS preference when no explicit attribute set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0c2138; --paper: #102a47; --paper-2: #0e2540; --ink: #f1edda; --ink-2: #bdcadb; --ink-3: #7a8ea8; --line: #1d3e63; --line-2: #274e7c; --accent: #ff8c5a; --accent-soft: #1f3e63; --blue: #5fb3ff; --green: #5fcf8f; --gold: #f0c34d; --warm: #d99a4e; --danger: #ff6b56; } } /* Base resets that depend on the tokens */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; margin: 0; } h1 { font-size: var(--fs-display-1); line-height: 1.02; letter-spacing: -0.025em; } h2 { font-size: var(--fs-display-2); line-height: 1.05; } h3 { font-size: var(--fs-display-3); line-height: 1.1; letter-spacing: -0.01em; } h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); letter-spacing: 0; margin: 0; } a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--ink); } ::selection { background: var(--accent-soft); color: var(--ink); } /* Utility — eyebrow / label */ .eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } /* Utility — data */ .data, .mono { font-family: var(--font-mono); font-size: var(--fs-data); }