/* ============================================================================= ATRIUM DESIGN SYSTEM Built for communication. The design language is inspired by native mobile applications rather than traditional websites. Principles • Speed over decoration • Content over chrome • One brand color • Neutral surfaces • Spacious layouts • Motion instead of ornament • Elevation through layers, not shadows Every token in this file exists to make the interface feel lightweight, touch-friendly and native on every platform. DESIGN TIERS Tier 1 Foundations Typography Spacing Radius Motion Tier 2 Colors Surfaces Shadows Borders Tier 3 Semantic colors Brand States ============================================================================= */ /* ============================================================================= TIER 1 · PRIMITIVES ========================================================================== */ :root { /* --- Type --------------------------------------------------------------- Two voices. The STEWARD (a quiet grotesk) speaks all interface; the INSCRIPTION (a lapidary serif) appears only at identity moments — names, balances, opening lines. Meeting it should feel like an occasion. */ --at-font: "Inter Variable", "Inter", "SF Pro Text", "SF Pro Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --at-font-heading: var(--at-font); --at-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace; /* Strict scale — eight sizes plus the two inscription sizes. */ --at-text-xs: 0.75rem; /* 12 captions, seals, micro-labels */ --at-text-sm: 0.8125rem; /* 13 secondary body, controls */ --at-text-md: 0.9375rem; /* 15 body default */ --at-text-lg: 1.0625rem; /* 17 emphasised body, card titles */ --at-text-xl: 1.3125rem; /* 21 section titles */ --at-text-2xl: 1.625rem; /* 26 page titles */ --at-text-3xl: 2rem; /* 32 hero interface moments */ --at-display: 2.25rem; /* 36 the Inscription */ --at-display-lg:3rem; /* 48 the Inscription, hero */ --at-weight-regular: 400; --at-weight-medium: 500; --at-weight-semibold: 600; --at-weight-bold: 700; /* The Inscription is carved once, at one weight. Never bolded. */ --at-weight-display: 400; --at-leading-tight: 1.15; --at-leading-snug: 1.3; --at-leading-normal: 1.5; --at-leading-relaxed: 1.65; /* Optical tracking — stone letters spread slightly; small text breathes. */ --at-tracking-display: 0.005em; /* the Inscription keeps lapidary air */ --at-tracking-title: -0.012em; --at-tracking-body: -0.004em; --at-tracking-meta: 0.004em; --at-tracking-caps: 0.09em; /* --- Courses (space) ---------------------------------------------------- Masonry logic on a 4px course. The THRESHOLD is the constant gutter every content object receives — the same doorway width through the whole house. Emptiness is structure: gaps between rooms always exceed gaps within them. */ --at-s0: 0.125rem; /* 2 */ --at-s1: 0.25rem; /* 4 */ --at-s2: 0.5rem; /* 8 */ --at-s3: 0.75rem; /* 12 */ --at-s4: 1rem; /* 16 */ --at-s5: 1.25rem; /* 20 */ --at-s6: 1.5rem; /* 24 */ --at-s7: 2rem; /* 32 */ --at-s8: 2.5rem; /* 40 */ --at-s9: 3rem; /* 48 */ --at-s10: 4rem; /* 64 */ --at-s11: 5rem; /* 80 */ --at-mat: var(--at-s4); /* the threshold */ --at-measure: 37.5rem; --at-measure-wide: 60rem; /* -------------------------------------------------------------------------- Page spacing Controls the vertical breathing room inside every page. Navigation clearance is handled separately by the top/tab spacers. --------------------------------------------------------------------------- */ /* Desktop */ --at-page-top: var(--at-s5); --at-page-bottom: var(--at-s0); /* Mobile */ --at-page-top-mobile: var(--at-s0); --at-page-bottom-mobile: var(--at-s0); /* --- Radius ------------------------------------------------------------- One curve family, slightly squarer than the last generation — stone, not pebbles. CONCENTRICITY RULE: inner = outer − gap. Corners that do not share a centre read as carelessness. Pure circles (--at-r-pill on equal sides) belong to people. */ --at-r-xs: 6px; /* 5 — inner chrome, kbd, tags */ --at-r-sm: 10px; /* 8 — controls, menu items */ --at-r-md: 14px; /* 12 — buttons, fields */ --at-r-lg: 20px; /* 18 — cards, modals */ --at-r-xl: 28px; /* 24 — sheets, media vitrines */ --at-r-pill: 999px; /* --- Z scale — ONE hierarchy every overlay must belong to. Base page < sticky nav < dropdowns < sheets < modals < fullscreen media viewer < media editor < upload progress < access lock < TOAST < boot splash. Toasts are the highest visible UI layer; nothing (Bootstrap's 1055 modal, a hardcoded 100000 viewer, …) may sit above them. */ --at-z-rail: 90; --at-z-nav: 100; --at-z-sticky: 200; --at-z-dropdown:400; --at-z-sheet: 500; --at-z-modal: 600; --at-z-tooltip: 700; --at-z-viewer: 720; /* fullscreen media viewer (.v-lightbox) */ --at-z-studio: 740; /* media editor / crop studio (.mstudio) */ --at-z-upload: 760; /* upload progress bar/chip — seen from the studio */ --at-z-lock: 780; /* full-screen access blocker (.lock) */ --at-z-toast: 800; /* transient notifications — highest visible layer */ --at-z-boot: 820; /* splash / boot screen only */ /* --- Clocks & curves ---------------------------------------------------- Light moves; the room does not. Two clocks govern everything: the NOD (instant acknowledgment) and the SETTLE (arrival of large surfaces). Exits are always faster than entrances — a good host lingers on hellos, not goodbyes. */ --at-t-instant: 90ms; /* the nod — press, toggle */ --at-t-fast: 140ms; /* small state changes */ --at-t-base: 200ms; /* most transitions */ --at-t-slow: 260ms; /* exits of large surfaces */ --at-t-slower: 340ms; /* arrivals of large surfaces */ --at-ease-out: cubic-bezier(0.2, 0, 0, 1); /* arrive: into the light */ --at-ease-in: cubic-bezier(0.45, 0, 1, 1); /* leave: dim and gone */ --at-ease-inout: cubic-bezier(0.45, 0, 0.15, 1); /* move within */ --at-ease-spring: cubic-bezier(0.34, 1.35, 0.44, 1);/* press-release only */ /* The bottom-sheet curve — the modern iOS/Android sheet spring: a strong, fluid decelerate with no overshoot. A sheet must never bounce past the top edge; it settles into it. */ --at-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --at-t-sheet: 440ms; /* a sheet travels its full height, so it earns a longer clock than an in-place arrival */ /* --- Iconography -------------------------------------------------------- Engraved, not stuck on: one stroke family, drawn in the current ink, sized on the type scale. */ --at-icon-xs: 0.875rem; /* 14 */ --at-icon-sm: 1rem; /* 16 */ --at-icon-md: 1.25rem; /* 20 */ --at-icon-lg: 1.5rem; /* 24 */ /* --- Control metrics ---------------------------------------------------- */ --at-hit: 2.75rem; /* 44px floor for every hand */ --at-control-h: 2.5rem; /* 40 default control height */ --at-control-h-sm: 2rem; /* 32 compact */ --at-control-h-lg: 3rem; /* 48 prominent */ /* --- Layout chrome ------------------------------------------------------ */ --at-topbar-h: 3.5rem; /* 56 */ --at-tabbar-h: 3.5rem; /* 56 + safe-area handled in layout */ --at-rail-w: 15rem; /* 240 */ } /* ============================================================================= TIER 2 · MATERIALS — DAY ----------------------------------------------------------------------------- Limestone court under an open sky. The canvas is cut stone; surfaces are lit plaster rising toward the opening. Elevation is light plus a soft mineral shadow — never a border. ========================================================================== */ :root, [data-theme="light"] { color-scheme: light; /* Surfaces — stone → plaster, rising toward the sky */ --at-bg: #F5F7FA; --at-bg-subtle: #EEF2F5; --at-surface: #FFFFFF; --at-surface-raised:#FFFFFF; --at-surface-hover: #F8FAFC; --at-surface-sunken:#E9EEF3; /* Ink — warm graphite; pure black vibrates on stone */ --at-ink: #111827; --at-ink-secondary: #4B5563; --at-ink-muted: #8A94A6; --at-ink-faint: #B6C0CC; --at-ink-inverse: #FFFFFF; /* Mortar joints — only where equal surfaces truly meet */ --at-hairline: rgba(17,24,39,.06); --at-hairline-strong: rgba(17,24,39,.10); /* Specular top edge: none by day — the sky lights everything evenly. (A complete no-op SHADOW, not a color.) */ --at-edge: 0 0 0 0 rgba(0, 0, 0, 0); --at-scrim: rgba(31, 28, 22, 0.45); --at-scrim-strong: rgba(31, 28, 22, 0.7); /* Elevation — proximity to the sky; soft, mineral-tinted, two layers */ --at-shadow-xs: 0 1px 2px rgba(16,24,40,.04); --at-shadow-sm: 0 2px 8px rgba(16,24,40,.06); --at-shadow-md: 0 8px 24px rgba(16,24,40,.08); --at-shadow-lg: 0 20px 48px rgba(16,24,40,.10); /* PORPHYRY — the one living hue. Imperial stone: deep plum-wine. */ --at-accent: var(--at-brand, #F07629); --at-accent-hover: #E56617; --at-accent-active: #D65B0F; --at-accent-ink: #F07629; /* AA text form on Day surfaces */ --at-accent-contrast: white; --at-accent-soft: rgba(240,118,41,.16); /* VERDIGRIS — the economy only. Treasure with patina, not casino gold. */ --at-gilt: #3F7D71; --at-gilt-bright: #4A8E80; --at-gilt-ink: #33685E; --at-gilt-contrast: #FFFFFF; --at-gilt-soft: rgba(63, 125, 113, 0.12); /* Semantics — earth pigments washed into the plaster, never sirens */ --at-success: #34C759; /* moss */ --at-success-soft: rgba(34,197,94,.12); --at-danger: #FF3B30; /* fired clay */ --at-danger-soft: rgba(239,68,68,.12); --at-warning: #F59E0B; /* ochre */ --at-warning-soft: rgba(245,158,11,.14); --at-info: #0A84FF; /* slate */ --at-info-soft: rgba(59,130,246,.12); /* Product voices */ --at-like: #FF3B30; /* clay rose — never neon */ --at-presence: #F59E0B; /* a lit window */ --at-focus-ring: rgba(240,118,41,.30); --at-skeleton: linear-gradient(90deg, #E6E4DD 25%, #F1EFE9 50%, #E6E4DD 75%); } /* ============================================================================= TIER 2 · MATERIALS — LAMPLIGHT ----------------------------------------------------------------------------- The atrium after dark. Not an inversion and never colder: plaster under lamplight — deep warm umber, surfaces catching a faint warm glint on their top edges (--at-edge does the work borders would). ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --at-bg: #101214; --at-bg-subtle: #17191C; --at-surface: #1D1F23; --at-surface-raised:#24272C; --at-surface-hover: #2B2F35; --at-surface-sunken:#0D0F11; --at-ink: #FFFFFF; --at-ink-secondary: #D3D8DF; --at-ink-muted: #9AA3AE; --at-ink-faint: #66707D; --at-ink-inverse: #1B1712; --at-hairline: rgba(255,255,255,.06); --at-hairline-strong: rgba(255,255,255,.10); /* Lamplight glint on the top edge of raised surfaces. */ --at-edge: inset 0 1px 0 rgba(255, 240, 209, 0.05); --at-scrim: rgba(8, 6, 3, 0.6); --at-scrim-strong: rgba(8, 6, 3, 0.8); --at-shadow-xs: 0 1px 2px rgba(16,24,40,.04); --at-shadow-sm: 0 2px 8px rgba(16,24,40,.06); --at-shadow-md: 0 8px 24px rgba(16,24,40,.08); --at-shadow-lg: 0 20px 48px rgba(16,24,40,.10); --at-accent: var(--at-brand, #F07629); --at-accent-hover: #E56617; --at-accent-active: #D65B0F; --at-accent-ink: #F07629; /* AA text form on Day surfaces */ --at-accent-contrast: white; --at-accent-soft: rgba(240,118,41,.16); --at-gilt: #6FAE9F; --at-gilt-bright: #80BEAF; --at-gilt-ink: #7CBCAC; --at-gilt-contrast: #0E1B17; --at-gilt-soft: rgba(111, 174, 159, 0.14); --at-success: #34C759; /* moss */ --at-success-soft: rgba(34,197,94,.12); --at-danger: #FF3B30; /* fired clay */ --at-danger-soft: rgba(239,68,68,.12); --at-warning: #F59E0B; /* ochre */ --at-warning-soft: rgba(245,158,11,.14); --at-info: #0A84FF; /* slate */ --at-info-soft: rgba(59,130,246,.12); --at-like: #FF3B30; --at-presence: #F59E0B; --at-focus-ring: rgba(240,118,41,.30); --at-skeleton: linear-gradient(90deg, #1B1712 25%, #262119 50%, #1B1712 75%); } /* ========================================================================== NIGHT — the deepest material. Where "dark" is a lit graphite room, NIGHT is the atrium after midnight: a near-black canvas, ink dimmed a step off pure white (no OLED glare), and a WIDER gap between each surface so elevation reads without borders on true black. Same Porphyry accent as every theme. Only the *material* tokens move here — accent, gilt and status colours are inherited-in-spirit from Dark so buttons, links and badges look identical; what changes is the room they sit in. Every component derives from these tokens, so Night is total by design. Elevation ladder (page → chrome → card → modal → hover), plus a true-black sunken for inputs and wells: --at-bg page canvas --at-bg-subtle bars / rails --at-surface cards, list rows --at-surface-raised modals, dropdowns, sheets, popovers, toasts --at-surface-hover hover/active on any of the above --at-surface-sunken inputs, tracks, wells ========================================================================== */ [data-theme="night"] { color-scheme: dark; --at-bg: #060708; --at-bg-subtle: #0B0D0F; --at-surface: #121417; --at-surface-raised:#191C20; --at-surface-hover: #22262C; --at-surface-sunken:#020303; /* Dimmed one step from Dark's pure white — kinder on near-black, still AA on every surface above. */ --at-ink: #F1F3F6; --at-ink-secondary: #C6CCD4; --at-ink-muted: #8B939D; --at-ink-faint: #59616B; --at-ink-inverse: #0B0D0F; /* Hairlines a touch stronger — separation must survive on OLED black. */ --at-hairline: rgba(255,255,255,.07); --at-hairline-strong: rgba(255,255,255,.12); /* Cooler top-edge glint than Lamplight's amber. */ --at-edge: inset 0 1px 0 rgba(255,255,255,.04); --at-scrim: rgba(0,0,0,.66); --at-scrim-strong: rgba(0,0,0,.84); /* Shadows deepen toward black; on near-black the deeper ambient ring does the lifting a soft light-mode shadow can't. */ --at-shadow-xs: 0 1px 2px rgba(0,0,0,.40); --at-shadow-sm: 0 2px 8px rgba(0,0,0,.48); --at-shadow-md: 0 10px 28px rgba(0,0,0,.56); --at-shadow-lg: 0 24px 56px rgba(0,0,0,.64); /* Accent unchanged — Porphyry orange carries across all three themes. */ --at-accent: var(--at-brand, #F07629); --at-accent-hover: #E56617; --at-accent-active: #D65B0F; --at-accent-ink: #F07629; --at-accent-contrast: white; --at-accent-soft: rgba(240,118,41,.16); --at-gilt: #6FAE9F; --at-gilt-bright: #80BEAF; --at-gilt-ink: #7CBCAC; --at-gilt-contrast: #0E1B17; --at-gilt-soft: rgba(111, 174, 159, 0.14); --at-success: #34C759; --at-success-soft: rgba(34,197,94,.12); --at-danger: #FF3B30; --at-danger-soft: rgba(239,68,68,.12); --at-warning: #F59E0B; --at-warning-soft: rgba(245,158,11,.14); --at-info: #0A84FF; --at-info-soft: rgba(59,130,246,.12); --at-like: #FF3B30; --at-presence: #F59E0B; --at-focus-ring: rgba(240,118,41,.30); --at-skeleton: linear-gradient(90deg, #101215 25%, #191C20 50%, #101215 75%); } /* With no explicit theme, follow the OS into Lamplight. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --at-bg: #14110C; --at-bg-subtle: #18140F; --at-surface: #1D1913; --at-surface-raised: #242019; --at-surface-hover: #2B261E; --at-surface-sunken: #0F0C08; --at-ink: #F2EEE5; --at-ink-secondary: #B0A999; --at-ink-muted: #918A78; --at-ink-faint: #575148; --at-ink-inverse: #1B1712; --at-hairline: rgba(242,238,229,0.07); --at-hairline-strong: rgba(242,238,229,0.14); --at-edge: inset 0 1px 0 rgba(255,240,209,0.05); --at-scrim: rgba(8,6,3,0.6); --at-scrim-strong: rgba(8,6,3,0.8); --at-shadow-xs: 0 1px 2px rgba(16,24,40,.04); --at-shadow-sm: 0 2px 8px rgba(16,24,40,.06); --at-shadow-md: 0 8px 24px rgba(16,24,40,.08); --at-shadow-lg: 0 20px 48px rgba(16,24,40,.10); --at-accent: var(--at-brand, #C08AA0); --at-accent-hover: #CC99AD; --at-accent-active: #B37B91; --at-accent-ink: #C892A7; --at-accent-contrast: #251218; --at-accent-soft: rgba(240,118,41,.16); --at-gilt: #6FAE9F; --at-gilt-bright: #80BEAF; --at-gilt-ink: #7CBCAC; --at-gilt-contrast: #0E1B17; --at-gilt-soft: rgba(111,174,159,0.14); --at-success: #82AE78; --at-success-soft: rgba(130,174,120,0.14); --at-danger: #C97B64; --at-danger-soft: rgba(201,123,100,0.14); --at-warning: #C89B52; --at-warning-soft: rgba(200,155,82,0.16); --at-info: #8AA5C8; --at-info-soft: rgba(138,165,200,0.14); --at-like: #C87E8C; --at-presence: #D2A05B; --at-focus-ring: rgba(192,138,160,0.4); --at-skeleton: linear-gradient(90deg,#1B1712 25%,#262119 50%,#1B1712 75%); } }