/* * apriori brand tokens * Source: Morfeo / Apriori Exp. 1 * All values extracted directly from the production UI. * Use these as the single source of truth for any new surface. */ /* ─── @font-face ─────────────────────────────────────────────────────────── */ @font-face { font-family: 'AlongSans'; src: url('./fonts/AlongSanss2-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'AlongSans'; src: url('./fonts/AlongSanss2-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'GinoraSans'; src: url('./fonts/GinoraSans-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } /* ─── Design tokens ──────────────────────────────────────────────────────── */ :root { /* ── Colour palette ──────────────────────────────────────────────────── */ /* Backgrounds (glass-layer system) */ --color-bg: rgba(9, 12, 18, 0.72); /* page / base layer */ --color-surface: rgba(15, 19, 25, 0.80); /* card / panel surface */ --color-surface-left: rgba(9, 10, 20, 0.72); /* U / emotion side */ --color-surface-right: rgba(9, 14, 14, 0.72); /* C / memory side */ --color-overlay-dream: rgba(4, 3, 11, 0.88); /* dream overlay */ --color-bg-true-black: #000000; /* html/body fallback */ /* Borders */ --color-border: rgba(30, 37, 48, 0.90); --color-border-left: rgba(129, 140, 248, 0.18); /* U side border */ --color-border-right: rgba(45, 212, 191, 0.18); /* C side border */ /* Text */ --color-text: #c8d0dc; /* body text */ --color-text-dim: #4a5568; /* muted / labels / placeholders */ --color-text-bright: #e8edf4; /* headings / emphasis */ --color-text-white: #ffffff; /* Accent — Unconscious (indigo/blue, left panels) */ --color-u-accent: #818cf8; --color-u-glow: rgba(129, 140, 248, 0.10); --color-u-tint-4: rgba(129, 140, 248, 0.04); --color-u-tint-5: rgba(129, 140, 248, 0.05); --color-u-tint-25: rgba(129, 140, 248, 0.25); /* Accent — Conscious (teal/aqua, right panels) */ --color-c-accent: #2dd4bf; --color-c-glow: rgba(45, 212, 191, 0.10); --color-c-tint-4: rgba(45, 212, 191, 0.04); --color-c-tint-5: rgba(45, 212, 191, 0.05); --color-c-tint-15: rgba(45, 212, 191, 0.15); /* Accent — Dreams/Memory (purple, memory graph) */ --color-d-accent: #a78bfa; --color-d-glow: rgba(167, 139, 250, 0.10); --color-d-tint-6: rgba(167, 139, 250, 0.06); --color-d-tint-12: rgba(167, 139, 250, 0.12); --color-d-tint-15: rgba(167, 139, 250, 0.15); /* Semantic */ --color-danger: #f87171; /* errors, destructive actions */ --color-danger-bg: rgba(248, 113, 113, 0.08); /* Glass whites (used in chat bubbles & input area) */ --color-glass-strong: rgba(255, 255, 255, 0.18); --color-glass-mid: rgba(255, 255, 255, 0.07); --color-glass-faint: rgba(255, 255, 255, 0.04); --color-glass-border: rgba(255, 255, 255, 0.10); /* ── Typography ──────────────────────────────────────────────────────── */ /* Families */ --font-display: 'AlongSans', -apple-system, sans-serif; /* all caps labels, headings */ --font-body: 'GinoraSans', -apple-system, sans-serif; /* body text, chat, prose */ /* Weights */ --font-weight-extralight: 200; /* AlongSans subtitles / metadata */ --font-weight-light: 300; /* GinoraSans body default */ --font-weight-semibold: 600; /* AlongSans headings / labels */ /* Scale */ --text-2xs: 7px; /* micro labels (emotion bar labels) */ --text-xs: 8px; /* entry labels, panel headers */ --text-sm: 9px; /* status pills, tab text, button labels */ --text-base: 10px; /* secondary UI text */ --text-md: 11px; /* panel body entries */ --text-body: 13px; /* chat body / primary reading size */ --text-h1: 14px; /* app title (AlongSans 600) */ --text-h2: 16px; /* section headings if needed */ /* Line heights */ --leading-tight: 1.3; --leading-normal: 1.5; --leading-body: 1.6; --leading-chat: 1.65; /* Letter spacing */ --tracking-none: 0; --tracking-tight: 0.04em; /* body text default */ --tracking-mid: 1px; --tracking-wide: 1.5px; /* button labels */ --tracking-wider: 2px; /* tab text, section labels */ --tracking-widest: 2.5px; /* panel header labels */ --tracking-max: 4px; /* app title */ /* ── Spacing ─────────────────────────────────────────────────────────── */ --space-1: 2px; --space-2: 4px; --space-3: 5px; --space-4: 6px; --space-5: 7px; --space-6: 8px; --space-7: 9px; --space-8: 10px; --space-10: 12px; --space-12: 14px; --space-16: 18px; --space-20: 24px; --space-24: 28px; --space-32: 36px; /* ── Border radius ───────────────────────────────────────────────────── */ --radius-sm: 4px; /* inputs, small tags, chips */ --radius: 6px; /* default — cards, buttons, entries */ --radius-md: 8px; /* input area, modals */ --radius-lg: 10px; /* chat bubbles */ --radius-xl: 14px; /* glass panels (glassmorphism override) */ --radius-2xl: 16px; /* large cards / panels */ --radius-full: 20px; /* pills, badges, status indicators */ --radius-circle: 50%; /* avatars, dots */ /* ── Shadows ─────────────────────────────────────────────────────────── */ --shadow-panel: 0 4px 32px rgba(0, 0, 0, 0.50), 0 2px 10px rgba(0, 0, 0, 0.30); --shadow-panel-lg: 0 6px 36px rgba(0, 0, 0, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.10); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.70); --shadow-bubble: 0 1px 3px rgba(0, 0, 0, 0.06); /* ── Glass (backdrop-filter) ─────────────────────────────────────────── */ --glass-blur: blur(20px) saturate(1.8); --glass-blur-md: blur(16px); --glass-blur-lg: blur(24px) saturate(1.5); --glass-blur-dream: blur(28px) saturate(1.6); /* ── Transitions ─────────────────────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.4s ease; --transition-glass: opacity 0.9s ease; --transition-bg: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ── Z-index scale ───────────────────────────────────────────────────── */ --z-bg: 0; --z-content: 1; --z-overlay: 10; --z-modal: 9999; }