/* ============================================================ De AI Tovenaar - Brand tokens Warm & human · simple & reliable · a touch of wizardry ============================================================ */ /* Fonts (Newsreader + Hanken Grotesk) are loaded in via partials/head.html - the original @import lived here on line 5. */ :root{ /* Surfaces */ --paper: #FAF6EE; /* warm cream - primary surface */ --sand: #F1E9D9; /* card / panel */ --sand-2: #E8DDC7; /* deeper sand */ --ink: #1C1733; /* deep plum-navy - text & dark sections */ --ink-2: #2A2348; /* raised on ink */ --ink-soft: #4A4366; /* muted on ink */ /* Accents */ --violet: #6E5CF0; /* "magic" - primary accent */ --violet-2: #9C8FFF; /* lighter violet (on dark) */ --violet-soft: #ECE9FF; /* violet tint surface */ --gold: #C9962F; /* "spark" - secondary accent */ --gold-2: #E7C66A; /* lighter gold (on dark) */ --gold-soft: #F7ECCF; /* gold tint surface */ /* Text */ --text: #221C38; /* body on paper */ --muted: #6E6655; /* warm muted */ --faint: #A99F8B; /* captions / labels */ --line: #E4DAC8; /* hairlines on paper */ --line-2: #D8CCB4; /* Type */ --display: 'Newsreader', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* Shape */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; /* Shadow - soft, warm, never harsh */ --shadow-sm: 0 1px 2px rgba(28,23,51,.06), 0 2px 6px rgba(28,23,51,.05); --shadow-md: 0 6px 18px rgba(28,23,51,.08), 0 2px 6px rgba(28,23,51,.05); --shadow-lg: 0 24px 60px rgba(28,23,51,.14), 0 8px 24px rgba(28,23,51,.08); /* Glow - the enchantment layer (magic.css leans on these) */ --glow-violet: 0 0 26px rgba(110,92,240,.38); --glow-gold: 0 0 20px rgba(231,198,106,.45); } *{box-sizing:border-box} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{margin:0;font-family:var(--sans);color:var(--text);background:var(--paper)} /* Type helpers */ .display{font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.015em} .serif-i{font-family:var(--display);font-style:italic;font-weight:400} .eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:var(--gold)} .lede{font-family:var(--display);font-weight:400;line-height:1.4;color:var(--muted)} /* The spark - reusable magic dot */ .spark{display:inline-block;width:.62em;height:.62em;vertical-align:.02em; background:var(--gold); -webkit-mask:var(--spark-mask) center/contain no-repeat; mask:var(--spark-mask) center/contain no-repeat} :root{--spark-mask:url("data:image/svg+xml;utf8,")} /* Buttons */ .btn{font-family:var(--sans);font-weight:600;font-size:1rem;border:none;cursor:pointer;white-space:nowrap; display:inline-flex;align-items:center;gap:.55em;padding:.85em 1.4em;border-radius:999px; text-decoration:none;transition:transform .15s ease, box-shadow .2s ease, background .2s ease} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-sm)} .btn-primary:hover{background:#120E26;box-shadow:var(--shadow-md)} .btn-magic{background:var(--violet);color:#fff;position:relative;overflow:hidden; box-shadow:0 6px 18px rgba(110,92,240,.32), var(--glow-violet)} .btn-magic:hover{background:#5B49E0;box-shadow:0 6px 22px rgba(110,92,240,.42), var(--glow-violet)} .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)} .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);background:rgba(28,23,51,.03)} /* Badge / chip */ .badge{display:inline-flex;align-items:center;gap:.45em;font-family:var(--sans);font-weight:600;white-space:nowrap; font-size:.78rem;letter-spacing:.02em;padding:.4em .8em;border-radius:999px; background:var(--violet-soft);color:#4A3FB0} .badge-gold{background:var(--gold-soft);color:#8A6516}