/* ───────────────────────────────────────────────────────────────
MATHOM HOUSE — Base Design System
Fonts (add to every page ):
─────────────────────────────────────────────────────────────── */
/* ─── DESIGN TOKENS — DARK (default) ─────────────────────────── */
:root {
--bg: #0b0e18;
--surface: #111625;
--surface2: #181e30;
--border: #252d45;
--gold: #c9a84c;
--gold-dim: #8a6e2f;
--gold-glow: rgba(201,168,76,0.18);
--text: #dde0e8;
--text-dim: #7a8099;
--green: #4ade80;
--red: #f87171;
--accent: #3b82f6;
--radius: 8px;
--card-gap: 20px;
}
/* ─── DESIGN TOKENS — LIGHT OVERRIDE ─────────────────────────── */
[data-theme="light"] {
--bg: #f4f5f8;
--surface: #ffffff;
--surface2: #f0f1f5;
--border: #dde0e8;
--text: #1a1e2e;
--text-dim: #5a6080;
}
/* ─── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Crimson Pro', Georgia, serif;
font-size: 18px;
line-height: 1.6;
min-height: 100vh;
overflow-x: clip;
transition: background 0.2s, color 0.2s;
}
/* Grain overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
background-size: 200px 200px;
pointer-events: none;
z-index: -1;
opacity: 0.4;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
p {
font-family: 'Rajdhani', sans-serif;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Rajdhani', sans-serif; }
li { font-family: 'Rajdhani', sans-serif; }
/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn {
font-family: 'Rajdhani', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 10px 20px;
border-radius: var(--radius);
cursor: pointer;
border: 1px solid var(--border);
transition: all 0.2s;
}
.btn-gold {
background: rgba(201,168,76,0.12);
border-color: var(--gold-dim);
color: var(--gold);
}
.btn-gold:hover { background: rgba(201,168,76,0.22); box-shadow: 0 0 16px var(--gold-glow); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }
/* ─── FORM ELEMENTS ───────────────────────────────────────────── */
label {
display: block;
font-family: 'Rajdhani', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 6px;
}
select, textarea, input[type="text"] {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-family: 'Crimson Pro', serif;
font-size: 1rem;
padding: 10px 12px;
margin-bottom: 16px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
appearance: none;
-webkit-appearance: none;
}
select:focus, textarea:focus, input[type="text"]:focus {
border-color: var(--gold-dim);
box-shadow: 0 0 0 3px var(--gold-glow);
}
textarea { resize: vertical; min-height: 100px; }
/* ─── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}