/* ───────────────────────────────────────────────────────────────────────────── Travel Wiki — Design Token System Single source of truth for both the Quartz wiki and the uploader UI. All tokens use the --tw- prefix to avoid conflicts with Quartz's own variables. Dark mode: Quartz sets [saved-theme="dark"] on . The uploader mirrors this behaviour via its own JS toggle. System preference is also respected when no manual override is set. ───────────────────────────────────────────────────────────────────────────── */ /* ── Light mode (default) ───────────────────────────────────────────────────── */ :root { /* Palette — raw colour values */ --tw-terracotta: #c0602a; --tw-terracotta-dark: #9a4820; --tw-terracotta-dim: #e8956a; --tw-amber: #d4952a; --tw-amber-bright: #e8b040; --tw-amber-dim: #3a2a10; /* Background scale — clean white */ --tw-bg: #ffffff; --tw-bg-subtle: #f8f7f6; --tw-surface: #f1f0ef; --tw-surface-raised: #ffffff; /* Border */ --tw-border: #e5e2de; --tw-border-strong: #cac5be; /* Text scale — warm, not cold grey */ --tw-text: #1e1610; --tw-text-muted: #5a4e42; --tw-text-faint: #9a8e82; --tw-text-inverse: #faf8f5; /* Accent — terracotta in light mode */ --tw-accent: var(--tw-terracotta); --tw-accent-hover: var(--tw-terracotta-dark); --tw-accent-subtle: rgba(192, 96, 42, 0.10); --tw-accent-ring: rgba(192, 96, 42, 0.30); /* Links */ --tw-link: var(--tw-terracotta); --tw-link-hover: var(--tw-terracotta-dark); --tw-link-external: #4a6b8c; --tw-link-external-hover: #365070; --tw-link-external-underline: rgba(74, 107, 140, 0.35); /* Log operation colours */ --tw-log-query: #5a7a50; /* Semantic */ --tw-success: #3a6b32; --tw-success-bg: #e8f3e6; --tw-success-border: #b0d8aa; --tw-error: #922020; --tw-error-bg: #f5e8e8; --tw-error-border: #d8aaaa; --tw-warning: #8a5a10; --tw-warning-bg: #faf0da; /* Typography */ --tw-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --tw-font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif; --tw-font-mono: 'IBM Plex Mono', 'Courier New', monospace; --tw-text-xs: 0.75rem; /* 12px */ --tw-text-sm: 0.875rem; /* 14px */ --tw-text-base: 1rem; /* 16px */ --tw-text-lg: 1.125rem; /* 18px */ --tw-text-xl: 1.25rem; /* 20px */ --tw-text-2xl: 1.5rem; /* 24px */ --tw-text-3xl: 1.875rem; /* 30px */ --tw-text-4xl: 2.25rem; /* 36px */ --tw-text-5xl: 3rem; /* 48px */ --tw-leading-tight: 1.3; --tw-leading: 1.7; --tw-leading-loose: 1.9; --tw-tracking-tight: -0.02em; --tw-tracking: 0; --tw-tracking-wide: 0.04em; --tw-tracking-wider: 0.08em; --tw-weight-normal: 400; --tw-weight-medium: 500; --tw-weight-semibold: 600; --tw-weight-bold: 700; /* Spacing — 4px base unit */ --tw-space-1: 0.25rem; /* 4px */ --tw-space-2: 0.5rem; /* 8px */ --tw-space-3: 0.75rem; /* 12px */ --tw-space-4: 1rem; /* 16px */ --tw-space-5: 1.25rem; /* 20px */ --tw-space-6: 1.5rem; /* 24px */ --tw-space-8: 2rem; /* 32px */ --tw-space-10: 2.5rem; /* 40px */ --tw-space-12: 3rem; /* 48px */ --tw-space-16: 4rem; /* 64px */ --tw-space-20: 5rem; /* 80px */ /* Border radius */ --tw-radius-sm: 3px; --tw-radius: 6px; --tw-radius-lg: 10px; --tw-radius-xl: 16px; --tw-radius-full: 9999px; /* Shadows — warm-tinted, not cold grey */ --tw-shadow-xs: 0 1px 2px rgba(30, 20, 12, 0.06); --tw-shadow-sm: 0 1px 4px rgba(30, 20, 12, 0.08); --tw-shadow: 0 2px 10px rgba(30, 20, 12, 0.10); --tw-shadow-lg: 0 4px 24px rgba(30, 20, 12, 0.12); --tw-shadow-xl: 0 8px 40px rgba(30, 20, 12, 0.14); --tw-shadow-nav: 0 -2px 12px rgba(30, 20, 12, 0.08); /* FAB gradient (terracotta — consistent in both modes) */ --tw-fab-grad-start: #d4704a; --tw-fab-grad-mid: #c0602a; --tw-fab-grad-end: #8c3a1c; --tw-fab-grad-start-hover: #c86040; --tw-fab-grad-mid-hover: #a84e22; --tw-fab-grad-end-hover: #7a2e14; --tw-fab-text: #fff9f2; --tw-fab-ring: rgba(255, 249, 242, 0.22); --tw-fab-inset-light: rgba(255, 255, 255, 0.18); --tw-fab-inset-light-hover: rgba(255, 255, 255, 0.15); --tw-fab-inset-dark: rgba(0, 0, 0, 0.25); --tw-fab-inset-dark-hover: rgba(0, 0, 0, 0.30); --tw-fab-glow: rgba(140, 58, 28, 0.45); --tw-fab-glow-hover: rgba(140, 58, 28, 0.55); --tw-fab-base-shadow: rgba(44, 31, 20, 0.30); --tw-fab-base-shadow-hover: rgba(44, 31, 20, 0.35); /* Spinner — on primary (dark) and secondary (light) buttons */ --tw-spinner-track: rgba(255, 255, 255, 0.35); --tw-spinner-track-light: rgba(30, 20, 12, 0.20); /* Transitions */ --tw-ease: cubic-bezier(0.4, 0, 0.2, 1); --tw-ease-out: cubic-bezier(0, 0, 0.2, 1); --tw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --tw-duration-fast: 100ms; --tw-duration: 150ms; --tw-duration-slow: 250ms; /* Layout constants */ --tw-nav-height: 48px; /* sticky mobile wiki header */ --tw-tab-height: 56px; /* bottom navigation bar */ --tw-fab-size: 3.25rem; /* floating action button */ --tw-content-width: 720px; /* max article content width */ --tw-page-width: 1200px; /* max overall page width */ --tw-sidebar-width: 260px; /* desktop sidebar width */ } /* ── Dark mode — system preference (no manual override set) ─────────────────── */ @media (prefers-color-scheme: dark) { :root:not([saved-theme="light"]) { --tw-bg: #161210; --tw-bg-subtle: #1e1812; --tw-surface: #28201a; --tw-surface-raised: #342820; --tw-border: #3a2e26; --tw-border-strong: #50403a; --tw-text: #f0ebe3; --tw-text-muted: #c0afa0; --tw-text-faint: #7a6a5e; --tw-text-inverse: #1e1610; /* Amber/gold replaces terracotta in dark mode */ --tw-accent: var(--tw-amber); --tw-accent-hover: var(--tw-amber-bright); --tw-accent-subtle: rgba(212, 149, 42, 0.12); --tw-accent-ring: rgba(212, 149, 42, 0.35); --tw-link: var(--tw-amber); --tw-link-hover: var(--tw-amber-bright); --tw-link-external: #7aaed0; --tw-link-external-hover: #9ac4e4; --tw-success: #52a848; --tw-success-bg: #1a2e18; --tw-success-border: #3a6838; --tw-error: #c84040; --tw-error-bg: #2e1818; --tw-error-border: #682828; --tw-warning: #d4a030; --tw-warning-bg: #2a1e08; --tw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --tw-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25); --tw-shadow: 0 2px 10px rgba(0, 0, 0, 0.30); --tw-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.35); --tw-shadow-xl: 0 8px 40px rgba(0, 0, 0, 0.40); --tw-shadow-nav: 0 -2px 12px rgba(0, 0, 0, 0.25); --tw-log-query: #6a9060; --tw-link-external-underline: rgba(122, 174, 208, 0.35); } } /* ── Dark mode — manual override ────────────────────────────────────────────── */ [saved-theme="dark"] { --tw-bg: #161210; --tw-bg-subtle: #1e1812; --tw-surface: #28201a; --tw-surface-raised: #342820; --tw-border: #3a2e26; --tw-border-strong: #50403a; --tw-text: #f0ebe3; --tw-text-muted: #c0afa0; --tw-text-faint: #7a6a5e; --tw-text-inverse: #1e1610; --tw-accent: var(--tw-amber); --tw-accent-hover: var(--tw-amber-bright); --tw-accent-subtle: rgba(212, 149, 42, 0.12); --tw-accent-ring: rgba(212, 149, 42, 0.35); --tw-link: var(--tw-amber); --tw-link-hover: var(--tw-amber-bright); --tw-link-external: #7aaed0; --tw-link-external-hover: #9ac4e4; --tw-success: #52a848; --tw-success-bg: #1a2e18; --tw-success-border: #3a6838; --tw-error: #c84040; --tw-error-bg: #2e1818; --tw-error-border: #682828; --tw-warning: #d4a030; --tw-warning-bg: #2a1e08; --tw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --tw-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25); --tw-shadow: 0 2px 10px rgba(0, 0, 0, 0.30); --tw-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.35); --tw-shadow-xl: 0 8px 40px rgba(0, 0, 0, 0.40); --tw-shadow-nav: 0 -2px 12px rgba(0, 0, 0, 0.25); --tw-log-query: #6a9060; --tw-link-external-underline: rgba(122, 174, 208, 0.35); }