/* ============================================================================ DU/ART — AI LAB · DESIGN TOKENS Extracted and formalized from duartealmada.com (theme "DU ART" / KV V6). All visual decisions in ai.duartealmada.com must reference these tokens. Two layers: 1. PRIMITIVES — raw values, the source of truth. Rarely used directly. 2. SEMANTIC — role-based aliases. Components should use THESE. ============================================================================ */ :root { /* ------------------------------------------------------------------ * * 1. PRIMITIVES — COLOR * The room is near-black warm charcoal; content is warm paper/ink; * orange is the single brand signal, used sparingly. * ------------------------------------------------------------------ */ /* Charcoal (the "room") */ --c-charcoal-900: #0e0d0c; /* page background (--kv-bg) */ --c-charcoal-800: #14110f; /* raised panel (--kv-bg-2) */ --c-charcoal-700: #1a1715; /* frame / deep surface */ --c-charcoal-600: #211d19; /* hairline-lit surface */ --c-line: #2a2622; /* borders / hairlines (--kv-line) */ /* Ink (text on charcoal) */ --c-ink: #f3eee5; /* primary text (--kv-ink) */ --c-ink-dim: #a39c8f; /* secondary text (--kv-ink-dim) */ --c-ink-faint: #8f8478; /* tertiary / labels — WCAG AA 5.31:1 on bg (was #5a554c 2.62:1) */ /* Paper (warm light surface — polaroids, special cards) */ --c-paper: #f4ede0; /* paper surface (--kv-paper) */ --c-paper-edge: #ded4c2; /* paper border (--kv-paper-edge)*/ --c-paper-ink: #2a2723; /* text on paper */ /* Brand — burnt orange */ --c-accent: #ff5a2f; /* brand signal (--kv-accent) */ --c-accent-dim: #c9421f; /* pressed / darker accent (--kv-accent-dim)*/ /* Status (analog-tuned, warm; used rarely and deliberately) */ --c-success: #5fbf7a; /* the "live" green from the site nav */ --c-warning: #e0a33a; --c-danger: #e5533d; --c-info: #6ea3c7; /* muted analog blue — cool counterpoint */ /* ------------------------------------------------------------------ * * 1. PRIMITIVES — TYPE FAMILIES * Display = editorial headline · Body = UI text · * Mono = technical/metadata labels · Hand = human/annotation accents * ------------------------------------------------------------------ */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-hand: 'Caveat', cursive; /* Font sizes — fluid where the site is fluid, fixed for UI chrome */ --fs-display-1: clamp(64px, 7.5vw, 132px); /* hero H1 */ --fs-display-2: clamp(56px, 7vw, 120px); /* section H2 (desktop) */ --fs-display-3: clamp(40px, 11vw, 72px); /* section H2 (mobile) */ --fs-watermark: clamp(72px, 10vw, 180px); /* oversized hand accent */ --fs-h1: 34px; /* app page title */ --fs-h2: 26px; /* app section title */ --fs-h3: 20px; /* card / group title */ --fs-h4: 16px; /* dense group title */ --fs-lg: 18px; /* lede / large body */ --fs-md: 16px; /* body / input text */ --fs-sm: 14px; /* secondary body */ --fs-xs: 13px; /* button / compact UI */ --fs-2xs: 11px; /* mono label */ --fs-3xs: 10px; /* mono micro-label */ --fs-4xs: 9px; /* mono nav index */ --lh-tight: 1.05; /* display headings */ --lh-snug: 1.25; /* subheads */ --lh-body: 1.55; /* paragraphs / textarea */ --ls-display: -0.025em; /* Space Grotesk tightens */ --ls-normal: 0; --ls-wide: 0.02em; /* buttons / nav */ --ls-label: 0.15em; /* mono labels */ --ls-label-x: 0.25em; /* mono eyebrows / caps */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ------------------------------------------------------------------ * * 1. PRIMITIVES — SPACE (8px base grid; site uses 4px half-steps) * ------------------------------------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; --space-11: 64px; --space-12: 80px; --space-13: 100px; --space-14: 120px; --space-15: 160px; --space-16: 180px; /* ------------------------------------------------------------------ * * 1. PRIMITIVES — RADIUS * The identity is SHARP. Corners are 0 by default (film frames, * index cards). Round only for pills, dots and avatars. * ------------------------------------------------------------------ */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-pill: 999px; --radius-full: 50%; /* ------------------------------------------------------------------ * * 1. PRIMITIVES — SHADOW / ELEVATION * Layered, photographic. Content floats above a dark room. * ------------------------------------------------------------------ */ --shadow-sm: 0 4px 8px rgba(0,0,0,0.3); --shadow-md: 0 12px 24px -12px rgba(0,0,0,0.65), 0 30px 60px -20px rgba(0,0,0,0.8); --shadow-lg: 0 30px 50px -15px rgba(0,0,0,0.85), 0 60px 100px -30px rgba(0,0,0,0.6); --shadow-inset: inset 0 0 60px rgba(0,0,0,0.4); /* Accent glow — hover on interactive surfaces */ --shadow-glow: 0 12px 30px -10px rgba(255,90,47,0.5); --shadow-glow-soft: 0 60px 100px -30px rgba(255,90,47,0.15); /* Focus ring — accessibility, brand-colored */ --focus-ring: 0 0 0 2px var(--c-charcoal-900), 0 0 0 4px var(--c-accent); /* ------------------------------------------------------------------ * * 1. PRIMITIVES — MOTION * Motion "develops" — ease-out, never bouncy. * ------------------------------------------------------------------ */ --ease-out: cubic-bezier(.2,.8,.2,1); /* the signature curve */ --ease-inout: cubic-bezier(.65,0,.35,1); --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 480ms; /* card lift / polaroid */ --dur-reveal: 1000ms; /* scroll reveal */ /* ------------------------------------------------------------------ * * 1. PRIMITIVES — Z-INDEX * ------------------------------------------------------------------ */ --z-base: 1; --z-raised: 10; --z-nav: 100; --z-dropdown: 200; --z-drawer: 300; --z-vignette: 40; /* room texture — pointer-events: none */ --z-grain: 50; /* room texture — pointer-events: none */ --z-backdrop: 900; --z-modal: 1000; --z-toast: 1100; --z-cursor: 9999; /* ------------------------------------------------------------------ * * 1. PRIMITIVES — GRAIN * ------------------------------------------------------------------ */ --grain-opacity: 0.18; /* ================================================================== * * 2. SEMANTIC TOKENS — use THESE in components. * ================================================================== */ /* Backgrounds / surfaces */ --bg-page: var(--c-charcoal-900); --bg-surface: var(--c-charcoal-800); /* panels, cards */ --bg-surface-2: var(--c-charcoal-700); /* raised within a panel */ --bg-inset: rgba(20,17,15,0.4); /* inset wells, inputs */ --bg-paper: var(--c-paper); /* special light surface */ --bg-hover: rgba(255,255,255,0.03); --bg-accent: var(--c-accent); --bg-accent-dim: var(--c-accent-dim); /* Text */ --text-primary: var(--c-ink); --text-secondary: var(--c-ink-dim); --text-tertiary: var(--c-ink-faint); --text-on-accent: var(--c-charcoal-900); /* dark ink on orange */ --text-on-paper: var(--c-paper-ink); --text-accent: var(--c-accent); --text-link: var(--c-accent); /* Borders */ --border-subtle: var(--c-line); --border-strong: #3a352f; --border-accent: var(--c-accent); --border-paper: var(--c-paper-edge); --border-hairline: rgba(255,255,255,0.06); /* Status roles (bg tints are low-opacity for alerts) */ --success: var(--c-success); --warning: var(--c-warning); --danger: var(--c-danger); --info: var(--c-info); --success-bg: rgba(95,191,122,0.10); --warning-bg: rgba(224,163,58,0.10); --danger-bg: rgba(229,83,61,0.10); --info-bg: rgba(110,163,199,0.10); /* ------------------------------------------------------------------ * * 2. SEMANTIC — LAYOUT * ------------------------------------------------------------------ */ --layout-max: 1440px; /* marketing / wide pages */ --layout-app-max: 1200px; /* app content column */ --layout-reading: 720px; /* prose / single form */ --layout-gutter: 64px; /* desktop page padding */ --layout-gutter-sm: 24px; /* mobile page padding */ --sidebar-width: 264px; /* dashboard sidebar */ --topbar-height: 64px; /* app top bar */ /* ------------------------------------------------------------------ * * 2. SEMANTIC — FORM * ------------------------------------------------------------------ */ --field-bg: rgba(255,255,255,0.10); /* a faint lift so the field reads as a field. Alpha (not a solid) so it works on page, card and modal alike. Raising it past ~0.10 starts to fail AA on the placeholder — see below. */ --field-bg-boxed: var(--bg-inset); /* boxed variant */ --field-border: var(--c-line); --field-border-hover: var(--c-accent); --field-border-focus: var(--c-accent); --field-text: var(--c-ink); --field-placeholder: #9a8f82; /* own value, NOT --c-ink-faint: the lifted --field-bg drops ink-faint to 4.18:1 (fails AA). 4.83:1 here. */ --field-radius: var(--radius-none); --field-pad-y: 14px; --field-pad-x: 16px; --field-font: var(--font-body); --field-size: var(--fs-md); --label-font: var(--font-mono); --label-size: var(--fs-3xs); --label-color: var(--c-ink-faint); --label-ls: var(--ls-label-x); /* ------------------------------------------------------------------ * * 2. SEMANTIC — BUTTON * ------------------------------------------------------------------ */ --btn-pad-y: 14px; --btn-pad-x: 22px; --btn-pad-y-sm: 9px; --btn-pad-x-sm: 16px; --btn-font: var(--font-body); --btn-size: var(--fs-xs); --btn-weight: var(--fw-semibold); --btn-ls: var(--ls-wide); --btn-radius: var(--radius-none); --btn-gap: var(--space-3); }