/* ========================================================================= Realitat Design System -- Foundations Colors, typography, spacing, radii, shadow + semantic tokens. Source of truth for every Realitat surface (holding site, SaaS products, software-house deliverables, decks). ========================================================================= */ /* ---------- Webfonts -------------------------------------------------- */ /* Per the brand book the three real typefaces are: * Arciform -- logo wordmark (REALITAT). Commercial. * Gotham Bold -- secondary wordmark / company-name in text. * Rounded Elegance -- body and headings. Commercial. None are on Google Fonts, so this file uses free substitutes: * Archivo Black => Arciform (heavy geometric, flat terminals) * Montserrat => Gotham (the standard free Gotham proxy) * Quicksand => Rounded Elegance (rounded geometric sans) The substitutions are flagged in README -- drop real font files into `fonts/` and update the @font-face stack when available. Fonts are loaded via tags in each layout's for faster non-blocking delivery — no CSS @import needed here. */ :root { /* ===================================================================== BRAND COLORS The three primaries come straight from the isometric cube logo. They are saturated, print-leaning, and meant to be used CONFIDENTLY against white or charcoal -- never muted into pastels. ===================================================================== */ /* Pulled verbatim from the brand book (page 13, Color Palette). */ --brand-red: #EB2930; /* Heat -- alerts, accents, primary CTAs */ --brand-blue: #2CACE3; /* Clarity -- links, info, "tech" surfaces */ --brand-green: #8CC443; /* Growth -- success, positive metrics */ /* Tints (mix with white) and shades (mix with charcoal). Use sparingly: the brand book uses each primary as a confident solid, never washed. */ --red-100: #FDE3E4; --red-200: #FAB6B9; --red-500: var(--brand-red); --red-600: #C61F25; --red-700: #97171C; --blue-100: #DEF1FA; --blue-200: #ADDDF3; --blue-500: var(--brand-blue); --blue-600: #1F8FBE; --blue-700: #176E94; --green-100: #EAF5D9; --green-200: #CDE6A7; --green-500: var(--brand-green); --green-600: #73A436; --green-700: #587E2B; /* ---------- Neutrals ---------- Brand book pins black at #000000, charcoal at #343434, the wordmark gray at #646467, and white at #FFFFFF. We expand around those */ --ink-900: #000000; /* Pure black -- extreme contrast moments */ --ink-800: #343434; /* Body charcoal -- book spec */ --ink-700: #4D4D4D; --ink-650: #646467; /* Wordmark gray -- book spec */ --ink-600: #7A7A7C; /* Tertiary text, meta */ --ink-500: #9A9A9C; /* Disabled text, placeholders */ --ink-400: #B8B8BA; --ink-300: #D9D9DA; /* Borders, dividers */ --ink-200: #ECECEE; /* Subtle fills */ --ink-100: #F5F5F6; /* Page wash */ --ink-50: #FAFAFB; /* Off-canvas */ --paper: #FFFFFF; /* Cards, primary surface -- book spec */ /* ---------- Semantic colors ---------- These map intent to brand colors; prefer these in components. */ --color-bg: var(--paper); --color-bg-subtle: var(--ink-50); --color-bg-muted: var(--ink-100); --color-bg-inverse: var(--ink-900); --color-fg: var(--ink-800); --color-fg-strong: var(--ink-900); --color-fg-muted: var(--ink-600); --color-fg-subtle: var(--ink-500); --color-fg-inverse: var(--paper); --color-border: var(--ink-300); --color-border-strong:var(--ink-800); --color-border-muted: var(--ink-200); --color-accent: var(--brand-red); /* default accent = heat */ --color-link: var(--brand-blue); --color-success: var(--green-600); --color-warning: #F59E0B; --color-danger: var(--brand-red); --color-info: var(--brand-blue); /* ===================================================================== TYPOGRAPHY (per brand book p. 15-16) --font-wordmark Arciform => Archivo Black. ONLY for the logo lockup when it's being rendered as live text; usually the raster logo PNG/SVG is preferred. --font-secondary Gotham Bold => Montserrat. For company name in running text, eyebrows, all-caps labels. --font-sans Rounded Elegance => Quicksand. The primary face for body, headings, UI -- rounded, friendly, geometric. --font-mono JetBrains Mono -- code, IDs, technical readouts. ===================================================================== */ --font-wordmark: "Archivo Black", "Archivo", system-ui, sans-serif; --font-secondary: "Montserrat", system-ui, -apple-system, sans-serif; --font-display: "Quicksand", system-ui, -apple-system, sans-serif; --font-sans: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale -- 1.25 (major third) ratio, tuned for product UI. */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-56: 3.5rem; --fs-72: 4.5rem; --fs-96: 6rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-display: -0.01em; /* tighten the big stuff -- Quicksand handles tight better than Archivo */ --tracking-caps: 0.08em; /* loosen UPPERCASE labels */ --tracking-normal: 0; /* ===================================================================== SPACING -- 4px base, predictable ladder. ===================================================================== */ --space-0: 0; --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; --space-32: 128px; /* ===================================================================== RADII -- restrained. The brand is geometric; default is 6px corners. Pills and circles are reserved for tags and avatars. ===================================================================== */ --radius-0: 0; /* hard corners -- used on tiles and isolated blocks */ --radius-sm: 4px; --radius-md: 6px; /* default -- buttons, inputs, cards */ --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; --radius-full: 50%; /* ===================================================================== ELEVATION -- flat-first. Two real shadows + a focus ring. ===================================================================== */ --shadow-1: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 1px rgba(26, 26, 26, 0.04); --shadow-2: 0 4px 10px rgba(26, 26, 26, 0.08), 0 2px 4px rgba(26, 26, 26, 0.04); --shadow-3: 0 16px 32px rgba(26, 26, 26, 0.10), 0 4px 8px rgba(26, 26, 26, 0.06); --ring-focus: 0 0 0 3px rgba(44, 172, 227, 0.40); /* blue 500 @ 40% */ --ring-danger:0 0 0 3px rgba(235, 41, 48, 0.30); /* ===================================================================== MOTION -- fast, mechanical. No bounce. Easing pulled toward "out". ===================================================================== */ --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1); --ease-in: cubic-bezier(0.5, 0, 0.75, 0); --ease-inout: cubic-bezier(0.45, 0, 0.15, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ========================================================================= Semantic element styles. Wrapped in @layer realitat so Tailwind (and other layered utility frameworks) can override cleanly. To use as the authoritative base, declare the layer order in your entrypoint, e.g.: @layer realitat, theme, base, components, utilities; @import "./colors_and_type.css"; @import "tailwindcss"; :root custom properties above are unlayered (declarations, not rules), so they're always available as `var(--brand-red)` regardless of layer order. ========================================================================= */ @layer realitat { html { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-size: var(--fs-16); line-height: var(--lh-normal); } /* Display / heading hierarchy. Headings ALWAYS in Archivo Black; all-caps only for hero/section openers and labels -- body headings are mixed-case. */ .h-display, h1.display { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--fs-56), 8vw, var(--fs-96)); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--color-fg-strong); } .h-eyebrow { font-family: var(--font-secondary); font-weight: 700; font-size: var(--fs-12); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-fg-muted); } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--color-fg-strong); } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-40); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--color-fg-strong); } h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-snug); color: var(--color-fg-strong); } h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--color-fg-strong); } p, .p { font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--color-fg); } .p-lead { font-size: var(--fs-20); line-height: var(--lh-relaxed); color: var(--color-fg); } .p-small{ font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--color-fg-muted); } .meta { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--color-fg-subtle); } code, .code, kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--ink-100); padding: 1px 6px; border-radius: var(--radius-sm); color: var(--color-fg-strong); } a { color: var(--color-link); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--blue-700); } ::selection { background: var(--brand-blue); color: #fff; } }