/** * Santal Studies — Design Tokens * public/assets/css/tokens.css * * Single source of truth for all CSS custom properties. * Public site: warm academic (light). Admin: dark navy. * Dark mode: toggled via [data-theme="dark"] on . */ /* ── Public site — light / academic ──────────────────────────────────────── */ :root { /* Page colours */ --bg-page: #f8f7f4; --bg-card: #ffffff; --bg-subtle: #f0ede8; --bg-dark: #1a1a2e; --bg-overlay: rgba(26,26,46,0.72); /* Text */ --text-primary: #1a1a2e; --text-secondary: #374151; --text-muted: #6b7280; --text-faint: #9ca3af; --text-on-dark: #e8e6e0; /* Borders */ --border: #e2ddd6; --border-light: #ece9e3; --border-strong: #c9c2b8; /* Accent */ --accent: #185FA5; --accent-hover: #0C447C; --accent-light: #E6F1FB; --accent-muted: #B5D4F4; /* Semantic */ --success: #15803d; --success-bg: #dcfce7; --warning: #b45309; --warning-bg: #fef3c7; --danger: #b91c1c; --danger-bg: #fee2e2; --info: #0369a1; --info-bg: #e0f2fe; /* Branch colours — public */ --branch-en: #185FA5; --branch-en-bg: #E6F1FB; --branch-rc: #27500A; --branch-rc-bg: #EAF3DE; --branch-ae: #633806; --branch-ae-bg: #FAEEDA; --branch-ot: #5C2D8A; --branch-ot-bg: #F3EDF8; /* Typography */ --font-serif: 'Source Serif 4', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-ui: 'Inter', system-ui, sans-serif; /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* Spacing (8px grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Layout */ --site-max: 1280px; --reading-max: 720px; --nav-height: 64px; --sidebar-w: 260px; /* Radii */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full:9999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05); --shadow-md: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05); --shadow-lg: 0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.05); /* Transitions */ --transition-fast: 150ms ease; --transition: 200ms ease; --transition-slow: 300ms ease; /* Z-index scale */ --z-base: 1; --z-above: 10; --z-nav: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* ── Dark mode (public site) ─────────────────────────────────────────────── */ [data-theme="dark"] { --bg-page: #0f111a; --bg-card: #161b27; --bg-subtle: #1a2030; --bg-dark: #0a0c14; --text-primary: #e8e6e0; --text-secondary: #b8b2a8; --text-muted: #8a8680; --text-faint: #5a5650; --border: #252d3d; --border-light: #1e2535; --border-strong: #2f3a4f; --accent-light: #162a42; --accent-muted: #1d4068; --bg-overlay: rgba(0,0,0,0.8); } /* ── Admin design system — dark navy ─────────────────────────────────────── */ .admin-ui, [data-layout="admin"] { --adm-bg: #0B0F1A; --adm-surface: #121826; --adm-card: #1A2233; --adm-card-hover: #1e2840; --adm-border: #2A3447; --adm-border-light:#1f2d40; --adm-text: #FFFFFF; --adm-text-2: #AAB3C5; --adm-text-3: #6B7A94; --adm-text-muted: #4A5568; --adm-accent: #3B82F6; --adm-accent-hover:#2563EB; --adm-accent-dim: #1e3a5f; --adm-success: #22c55e; --adm-success-bg: #052e16; --adm-warning: #f59e0b; --adm-warning-bg: #1c1300; --adm-danger: #ef4444; --adm-danger-bg: #1c0505; --adm-info: #38bdf8; --adm-info-bg: #0a1929; /* Status colours */ --status-draft: #94a3b8; --status-review: #f59e0b; --status-published: #22c55e; --status-hidden: #a78bfa; --status-archived: #6b7280; --status-retired: #ef4444; /* Branch colours — admin context (same as public) */ --branch-en: #2563EB; --branch-rc: #16A34A; --branch-ae: #D97706; --branch-ot: #7C3AED; --adm-font: 'Inter', system-ui, sans-serif; --adm-font-mono: 'JetBrains Mono', monospace; --adm-nav-h: 56px; --adm-sidebar-w: 256px; --adm-sidebar-collapsed: 60px; --adm-panel-w: 300px; } /* ── Status badge colours (global) ───────────────────────────────────────── */ .status-draft { --status-color: #94a3b8; --status-bg: #1e2535; } .status-review { --status-color: #f59e0b; --status-bg: #1c1300; } .status-published { --status-color: #22c55e; --status-bg: #052e16; } .status-hidden { --status-color: #a78bfa; --status-bg: #1a0a2e; } .status-archived { --status-color: #6b7280; --status-bg: #1a1a1a; } .status-retired { --status-color: #ef4444; --status-bg: #1c0505; } /* ── Language indicator dots ─────────────────────────────────────────────── */ .lang-dot[data-status="published"] { background: #22c55e; } .lang-dot[data-status="draft"] { background: #f59e0b; } .lang-dot[data-status="none"] { background: #2A3447; }