/* ════════════════════════════════════════════════════════════════
NOÛS · IURI ANDREAZZA — Design Kit
01 · TOKENS — color (dark + light), type, space, radius, motion
────────────────────────────────────────────────────────────────
Drop into any project:
Theme: default is dark. Add data-theme="light" on or any
wrapper to flip. Every component reads the SAME semantic tokens,
so a single attribute re-themes the whole tree.
════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
/* ── DARK (default) ─────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
--ink: #0A0908; /* page background, deepest */
--carbon: #15131A; /* panels, cards */
--graphite: #221F26; /* borders, dividers */
--slate: #3A3640; /* muted ui chrome */
--bone: #EDE8DD; /* primary text */
--bone-dim: #ADA69B; /* secondary text */
--bone-mute: #6E6960; /* tertiary, captions */
--brass: #B5C2F0; /* PRIMARY ACCENT — iris periwinkle */
--brass-deep: #7A8AC8; /* hover / pressed */
--brass-glow: #DDE5FA; /* highlight */
--plasma: #6DD3C4; /* SECONDARY ACCENT — mint / data */
--plasma-deep:#3FA89A;
--signal: #39E18A; /* live / now indicator */
--warn: #E8865E; /* attention */
/* surface tints derived from accents (theme-aware) */
--tint-brass: rgba(181, 194, 240, 0.06);
--tint-plasma: rgba(109, 211, 196, 0.08);
--tint-warn: rgba(232, 134, 94, 0.08);
--tint-signal: rgba(57, 225, 138, 0.08);
--surface-1: rgba(255, 255, 255, 0.015);
--surface-2: rgba(255, 255, 255, 0.03);
/* rim / glow / lift — inset hairlines instead of drop shadows */
--rim: inset 0 0 0 1px rgba(237, 232, 221, 0.06);
--rim-strong: inset 0 0 0 1px rgba(237, 232, 221, 0.14);
--rim-brass: inset 0 0 0 1px rgba(181, 194, 240, 0.32);
--rim-signal: inset 0 0 0 1px rgba(57, 225, 138, 0.28);
--rim-warn: inset 0 0 0 1px rgba(232, 134, 94, 0.40);
--glow-brass: 0 0 0 1px rgba(181, 194, 240, 0.25), 0 8px 40px -8px rgba(181, 194, 240, 0.35);
--lift: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 14px 28px -12px rgba(0, 0, 0, 0.5);
/* gradients for decorative panels */
--grad-panel: linear-gradient(160deg, #1A171F 0%, #0E0C12 100%);
--grad-spot: linear-gradient(135deg, #131119 0%, #0A0908 100%);
--noise-op: 0.4;
color-scheme: dark;
}
/* ── LIGHT — warm-paper editorial counterpart ───────────────────── */
[data-theme="light"] {
--ink: #F5F2EB; /* warm paper background */
--carbon: #FFFFFF; /* panels, cards (pop white) */
--graphite: #E2DCCF; /* borders, dividers */
--slate: #C2BBAD; /* muted ui chrome */
--bone: #1B1813; /* primary text (warm near-black) */
--bone-dim: #5A554C; /* secondary text */
--bone-mute: #8C857A; /* tertiary, captions */
--brass: #4F5DB0; /* deeper iris for contrast on paper */
--brass-deep: #38458C; /* hover / pressed */
--brass-glow: #6E7AC8; /* highlight */
--plasma: #1F8073; /* deeper mint */
--plasma-deep:#155A50;
--signal: #1B9E57; /* deeper live green */
--warn: #C25E32; /* attention */
--tint-brass: rgba(79, 93, 176, 0.07);
--tint-plasma: rgba(31, 128, 115, 0.08);
--tint-warn: rgba(194, 94, 50, 0.08);
--tint-signal: rgba(27, 158, 87, 0.08);
--surface-1: rgba(27, 24, 19, 0.02);
--surface-2: rgba(27, 24, 19, 0.04);
--rim: inset 0 0 0 1px rgba(27, 24, 19, 0.08);
--rim-strong: inset 0 0 0 1px rgba(27, 24, 19, 0.16);
--rim-brass: inset 0 0 0 1px rgba(79, 93, 176, 0.42);
--rim-signal: inset 0 0 0 1px rgba(27, 158, 87, 0.36);
--rim-warn: inset 0 0 0 1px rgba(194, 94, 50, 0.44);
--glow-brass: 0 0 0 1px rgba(79, 93, 176, 0.22), 0 8px 40px -8px rgba(79, 93, 176, 0.28);
--lift: 0 30px 60px -20px rgba(40, 34, 24, 0.18), 0 14px 28px -12px rgba(40, 34, 24, 0.12);
--grad-panel: linear-gradient(160deg, #FFFFFF 0%, #F1EDE3 100%);
--grad-spot: linear-gradient(135deg, #FBF9F4 0%, #EFEADF 100%);
--noise-op: 0.18;
color-scheme: light;
}
/* ── SHARED TOKENS (theme-independent) ──────────────────────────── */
:root {
/* TYPE */
--font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
--font-body: 'Geist', -apple-system, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
--t-mega: clamp(4.5rem, 12vw, 11rem); /* hero display */
--t-display: clamp(3rem, 7vw, 6.5rem); /* section heroes */
--t-h1: clamp(2.25rem, 4.5vw, 4rem);
--t-h2: clamp(1.625rem, 2.8vw, 2.5rem);
--t-h3: clamp(1.25rem, 1.8vw, 1.625rem);
--t-body: 1.0625rem;
--t-small: 0.875rem;
--t-micro: 0.75rem;
--lh-tight: 1.02;
--lh-snug: 1.15;
--lh-normal: 1.5;
--lh-loose: 1.7;
--ls-display:-0.025em;
--ls-body: -0.005em;
--ls-mono: 0;
--ls-tracked: 0.18em;
--ls-wide: 0.32em;
/* SPACE — base-4 scale */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px; --sp-11: 192px; --sp-12: 256px;
--gutter: clamp(20px, 4vw, 56px);
--max-w: 1440px;
/* RADII */
--r-0: 0; --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-pill: 999px;
/* MOTION */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-snap: 180ms;
--dur-quick: 280ms;
--dur-base: 520ms;
--dur-slow: 900ms;
--dur-cinema:1400ms;
}
/* ── BASE RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
background: var(--ink);
color: var(--bone);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: var(--lh-normal);
letter-spacing: var(--ls-body);
font-weight: 400;
transition: background var(--dur-base) var(--ease-out-quint),
color var(--dur-base) var(--ease-out-quint);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--brass); color: var(--ink); }
/* ── TYPE UTILITIES ─────────────────────────────────────────────── */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.eyebrow {
font-family: var(--font-mono); font-size: var(--t-micro);
letter-spacing: var(--ls-wide); text-transform: uppercase;
color: var(--bone-mute);
}
.italic { font-style: italic; }
.accent { color: var(--brass); }
.accent-2 { color: var(--plasma); }
.bone-dim { color: var(--bone-dim); }
.bone-mute { color: var(--bone-mute); }
/* ── LAYOUT HELPERS ─────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.cluster{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); } .gap-7 { gap: var(--sp-7); }
/* ── SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--graphite); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate); }
/* ── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}