/* forge-tokens.css — Editorial Forge design system (Direction A) * Central design tokens shared across the entire app: auth pages, * standalone pages, the main chat shell, modals, admin consoles, * and mobile. * * Sections: * FONTS — Google Fonts import (Cormorant Garamond + Spectral + JetBrains Mono) * :root — design tokens (color, type, space, radius, motion, shadow) * .ink-grain — optional warm-grain bg utility * .gold-rule — hairline decorative rule with center ornament */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── INK PALETTE ─────────────────────────────────────────────────── * Warm dark, paper-stained, slight crimson tint in the deepest values. */ --ink: #0d0a07; --ink-1: #14110c; /* slightly raised surface */ --ink-2: #1a160f; /* card / panel bg */ --ink-3: #221d14; /* deeper raised (modal, dropdown) */ --ink-line: #2a2418; /* default border */ --ink-line-bright: #3a3120; /* hover border */ /* ── PARCHMENT (TEXT) ────────────────────────────────────────────── * The "ink on paper" inversion — soft warm whites for body copy. */ --parchment: #f4ecd8; /* primary text */ --parchment-dim: #c8bfa6; /* secondary text */ --parchment-mute: #8a8470; /* tertiary / placeholder */ --parchment-faint: #5a5448; /* disabled / hint */ /* ── GOLD (ACCENT) ───────────────────────────────────────────────── * Lead accent. Hot for hover/active, deep for hairlines and reduced. */ --gold: #c9a84c; --gold-hot: #e8a840; --gold-deep: #8a7028; --gold-faint: #5a4818; --gold-glow: rgba(201, 168, 76, 0.12); --gold-glow-strong: rgba(201, 168, 76, 0.22); /* ── SEMANTIC ───────────────────────────────────────────────────── */ --crimson: #b04848; /* danger / error */ --crimson-soft: #d49494; /* error text */ --crimson-glow: rgba(176, 72, 72, 0.10); --sage: #88a878; /* success / positive */ --sage-soft: #b8d098; --sage-dim: #4a6038; --sage-glow: rgba(136, 168, 120, 0.10); --copper: #c97950; /* warning / pending / secondary accent */ --copper-soft: #e4a888; --copper-dim: #7a4830; --copper-glow: rgba(201, 121, 80, 0.14); --accent-muted: #b09870; /* muted warm secondary — neutral mode chrome, general badges */ --accent-muted-dim: #6a5a40; /* ── TYPOGRAPHY ──────────────────────────────────────────────────── * Direction A leans entirely on serifs. JetBrains Mono is reserved * for code blocks and the admin/repair consoles — NOT for body. */ --serif-display: "Cormorant Garamond", "Garamond", "Times New Roman", serif; --serif-body: "Spectral", "Georgia", "Times New Roman", serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", monospace; /* Type scale — proportions tuned for Spectral body @ 300/400 wt */ --fs-display: clamp(56px, 6vw, 88px); --fs-h1: clamp(28px, 3vw, 40px); --fs-h2: 22px; --fs-h3: 18px; --fs-body: 17px; --fs-sm: 14px; --fs-xs: 12px; --fs-micro: 11px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.55; --lh-loose: 1.7; --ls-display: -0.02em; --ls-body: 0.005em; --ls-eyebrow: 0.22em; --ls-uppercase: 0.16em; /* ── SPACING (8-pt grid + 4-pt half-step) ──────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 56px; --sp-10: 64px; --sp-12: 96px; /* ── RADIUS — restrained ─────────────────────────────────────────── */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; /* card */ --r-xl: 14px; /* modal */ --r-pill: 999px; /* ── BORDER WIDTHS ───────────────────────────────────────────────── */ --bw-hair: 1px; --bw-1: 1.5px; --bw-2: 2px; /* ── MOTION ──────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 180ms; --dur-slow: 280ms; /* ── SHADOW & ELEVATION ──────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(0,0,0,0.25); --shadow-2: 0 6px 16px -4px rgba(0,0,0,0.4); --shadow-card: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.04); --shadow-modal: 0 40px 120px -10px rgba(0,0,0,0.8), 0 0 0 1px rgba(201,168,76,0.06); --shadow-button: 0 2px 0 var(--gold-deep); /* ── COMPONENT TOKENS — referenced by surface CSS ────────────────── */ --bg: var(--ink); --surface: var(--ink-1); --raised: var(--ink-2); --border: var(--ink-line); --border-lit: var(--ink-line-bright); --text: var(--parchment); --text-dim: var(--parchment-dim); --text-mute: var(--parchment-mute); --link: var(--gold); --link-hover: var(--gold-hot); --danger: var(--crimson); --success: var(--sage); --warning: var(--copper); --focus-ring: 0 0 0 3px var(--gold-glow); --scroll: var(--ink-line); --accent: var(--gold); /* alias for surfaces that reference --accent */ /* Message bubble surfaces (chat) */ --user-bg: rgba(36, 28, 16, 0.7); --ai-bg: rgba(20, 16, 10, 0.6); --radius: var(--r-lg); /* ── Cross-file compatibility aliases ──────────────────────────────── * Various component CSS files use these names (legacy / parallel naming * conventions from when files were written by different hands). Aliased * here so every var(--name) reference resolves to a Direction-A value * without having to rewrite each callsite. */ --bg-primary: var(--ink); --bg-secondary: var(--ink-1); --bg-tertiary: var(--ink-2); --bg-dark: var(--ink); --bg-card: var(--ink-1); --bg-elevated: var(--ink-2); --bg-elev-1: var(--ink-1); --bg-elev-2: var(--ink-2); --bg-input: var(--ink); --input-bg: var(--ink); --card-bg: var(--ink-1); --surface-alt: var(--ink-1); --surface-elevated: var(--ink-2); --hover: rgba(255, 255, 255, 0.04); --border-soft: var(--ink-line); --border-subtle: var(--ink-line); --text-primary: var(--parchment); --text-secondary: var(--parchment-dim); --text-muted: var(--parchment-mute); --fg: var(--parchment); --fg-muted: var(--parchment-mute); --gold-dim: var(--gold-deep); --green: var(--sage); --red: var(--crimson); --amber: var(--copper); --accent-gold: var(--gold); --font-display: var(--serif-display); --accent-rgb: 201, 168, 76; /* gold rgb — use as rgba(var(--accent-rgb), 0.x) */ --sidebar-width: 281px; } /* ── UTILITY: warm paper-grain background overlay ───────────────────── * Apply to a fixed-positioned ::before on body if you want the texture. */ .ink-grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(201,168,76,0.06) 0%, transparent 60%), radial-gradient(ellipse 70% 90% at 50% 120%, rgba(176,72,72,0.04) 0%, transparent 60%), url("data:image/svg+xml;utf8,"); } /* ── UTILITY: hairline rule with center ornament ──────────────────── */ .gold-rule { position: relative; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold-deep) 30%, var(--gold-deep) 70%, transparent 100%); margin: var(--sp-5) auto; width: 70%; } .gold-rule::before { content: "✦"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg); padding: 0 var(--sp-3); color: var(--gold); font-size: var(--fs-xs); letter-spacing: 0.1em; } /* ── UTILITY: focus ring (use on :focus-visible) ──────────────────── */ .focus-ring:focus-visible, :where(button, a, input, textarea, select).focus-ring:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ── PREFERS-REDUCED-MOTION ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }