/* ===================================================================== Marvel Mirror AI — colors_and_type.css The foundational tokens for the "Editorial Research Notebook" system. Imported by every preview card, UI kit screen and slide template. ===================================================================== */ /* ---------- Webfonts --------------------------------------------------- The brief asks for "Apple's New York / a refined book serif". We license Source Serif 4 (Adobe / SIL OFL) via Google Fonts — a true book serif with editorial proportions, optical sizing, and a quiet italic. JetBrains Mono carries the monospaced UPPERCASE metadata. The body sans uses the macOS system stack since MMAI ships on macOS. ---------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* ========================================================= COLOR — Paper & Ink The substrate of the whole product. Off-white "paper", near-black "ink", warm neutral mid-tones. ========================================================= */ --paper: #F6F2EA; /* primary background, warm off-white */ --paper-raised: #FBF8F2; /* cards lifted off paper */ --paper-sunken: #EDE7DB; /* wells, search fields, code blocks */ --paper-edge: #E3DBC9; /* hairline borders on warm surfaces */ --ink: #1C1A16; /* primary text — near-black with a touch of warmth */ --ink-2: #3A362E; /* secondary text */ --ink-3: #6B6558; /* tertiary text, metadata */ --ink-4: #9B9485; /* faint text, placeholder */ --ink-5: #C6BEAD; /* dim gray — queued, disabled, inactive */ /* ========================================================= COLOR — Brand & Feature Accents Each accent has tint (~10–12%) and hairline border variants for the tinted-card pattern. ========================================================= */ /* Champagne — primary accent: buttons, selection, citations */ --champagne: #D3C5AC; --champagne-hover: #C8B89A; --champagne-press: #B9A684; --champagne-tint: rgba(211, 197, 172, 0.16); --champagne-rail: #C8B89A; --champagne-edge: rgba(185, 166, 132, 0.45); /* Slate Indigo — Knowledge Graph feature */ --indigo: #61759E; --indigo-hover: #54688F; --indigo-tint: rgba(97, 117, 158, 0.12); --indigo-edge: rgba(97, 117, 158, 0.32); /* Umber — warm secondary accent (citations, source documents) */ --umber: #946B3D; --umber-hover: #815C32; --umber-tint: rgba(148, 107, 61, 0.12); --umber-edge: rgba(148, 107, 61, 0.32); /* Reasoning — "model thinking" purple at ~85% */ --reasoning: rgba(112, 90, 156, 0.85); --reasoning-solid: #705A9C; --reasoning-tint: rgba(112, 90, 156, 0.10); --reasoning-edge: rgba(112, 90, 156, 0.30); /* Sage — success / completed */ --sage: #80B385; --sage-hover: #6FA174; --sage-tint: rgba(128, 179, 133, 0.12); --sage-edge: rgba(128, 179, 133, 0.32); /* Terra-cotta — failure / alert (muted) */ --terracotta: #B07A6B; --terracotta-hover: #9C6857; --terracotta-tint: rgba(176, 122, 107, 0.12); --terracotta-edge: rgba(176, 122, 107, 0.32); /* Queued / inactive (dim gray) */ --queued: #ADA694; --queued-tint: rgba(173, 166, 148, 0.14); --queued-edge: rgba(173, 166, 148, 0.34); /* ========================================================= COLOR — Semantic Reference the palette above through semantic names so components stay readable. ========================================================= */ --bg: var(--paper); --bg-raised: var(--paper-raised); --bg-sunken: var(--paper-sunken); --hairline: var(--paper-edge); --hairline-strong: #D3C9B4; --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--ink-3); --fg-faint: var(--ink-4); --fg-disabled: var(--ink-5); --accent: var(--champagne); --selection-bg: var(--champagne-tint); --selection-edge: var(--champagne-edge); --state-processing: var(--champagne-rail); --state-reasoning: var(--reasoning-solid); --state-complete: var(--sage); --state-failed: var(--terracotta); --state-queued: var(--queued); /* ========================================================= TYPE — Families ========================================================= */ --font-serif: "Source Serif 4", "Source Serif Pro", "New York", "Iowan Old Style", "Charter", "Georgia", serif; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Berkeley Mono", "Menlo", "Consolas", monospace; /* ========================================================= TYPE — Scale Body 15/22 anchors the system. Serifs handle display sizes. ========================================================= */ --fs-display: 44px; /* hero document titles */ --fs-h1: 30px; --fs-h2: 22px; --fs-h3: 18px; --fs-body: 15px; --fs-small: 13px; --fs-meta: 11px; /* monospaced UPPERCASE labels */ --fs-pill: 10px; /* tiny chip labels */ --lh-display: 1.10; --lh-heading: 1.20; --lh-body: 1.55; --lh-tight: 1.30; --tracking-display: -0.014em; /* tight tracking for serif display */ --tracking-heading: -0.008em; --tracking-body: 0em; --tracking-meta: 0.14em; /* wide on monospaced UPPERCASE */ --tracking-pill: 0.10em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ========================================================= SPACING & RADII 4pt grid. Cards 8pt, chips/pills 4pt. ========================================================= */ --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: 56px; --space-10: 72px; --radius-pill: 4px; --radius-card: 8px; --radius-window: 12px; --radius-sheet: 14px; --rail-width: 3px; /* state-colored left rail */ --hairline-w: 0.5px; /* ========================================================= ELEVATION & SHADOWS Quiet, paper-on-paper shadows — never glowy. ========================================================= */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(28, 26, 22, 0.04), 0 1px 2px rgba(28, 26, 22, 0.05); --shadow-2: 0 1px 0 rgba(28, 26, 22, 0.04), 0 4px 14px -4px rgba(28, 26, 22, 0.10); --shadow-3: 0 2px 0 rgba(28, 26, 22, 0.04), 0 14px 40px -8px rgba(28, 26, 22, 0.16); --shadow-inset: inset 0 0 0 0.5px var(--hairline-strong); /* ========================================================= MOTION Slow, calm, library-quiet. No bounces. ========================================================= */ --ease-paper: cubic-bezier(0.20, 0.00, 0.20, 1.00); --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1.00); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ========================================================= GRADIENTS — dividers fade to transparent, never hard ========================================================= */ --divider-h: linear-gradient( to right, transparent 0%, var(--hairline-strong) 16%, var(--hairline-strong) 84%, transparent 100% ); --divider-v: linear-gradient( to bottom, transparent 0%, var(--hairline-strong) 16%, var(--hairline-strong) 84%, transparent 100% ); } /* ===================================================================== Element defaults ===================================================================== */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .display, .serif { font-family: var(--font-serif); font-weight: var(--weight-semibold); color: var(--fg); } h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--tracking-heading); } .display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); } p { margin: 0 0 var(--space-4); } /* Monospaced UPPERCASE metadata labels — the system's signature voice */ .meta, .label-meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--fg-muted); } /* Pill chips (CITED, KG) */ .pill { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-pill); letter-spacing: var(--tracking-pill); text-transform: uppercase; font-weight: var(--weight-medium); background: var(--champagne-tint); color: var(--ink-2); border: var(--hairline-w) solid var(--champagne-edge); } .pill--kg { background: var(--indigo-tint); border-color: var(--indigo-edge); color: var(--indigo); } .pill--reasoning { background: var(--reasoning-tint); border-color: var(--reasoning-edge); color: var(--reasoning-solid); } .pill--sage { background: var(--sage-tint); border-color: var(--sage-edge); color: #4F7F55; } .pill--terra { background: var(--terracotta-tint); border-color: var(--terracotta-edge); color: #8B5749; } /* Gradient divider rule */ .rule { height: 1px; border: 0; background: var(--divider-h); } /* Selection — champagne tint, not the OS blue */ ::selection { background: var(--champagne-tint); color: var(--fg); }