/* ============================================================ ARCA · Design Tokens — "Eggshell Atelier" Archival Research & Classification Agent ------------------------------------------------------------ Light, paper-true surface · crisp black ink · Wes Anderson accent palette for classification, collections & status. Single source of truth. Edit values here — every surface, component and app screen re-themes automatically. ============================================================ */ :root { /* ──────────────────────────────────────────────── 1 · CORE PALETTE (the brief — eggshell + ink) ──────────────────────────────────────────────── */ --bg-deepest: #f4f1ea; /* eggshell beige — page ground */ --bg-surface: #ffffff; /* pure white — panels & cards */ --bg-elevated: #ebe8e0; /* muted light beige — raised/hover */ --text-primary: #111111; /* crisp black-ink text */ --text-secondary:#444444; /* charcoal dark grey */ --text-muted: #777777; /* warm medium grey */ --accent: #111111; /* minimalist black ink — primary action */ --accent-hover: #333333; /* slightly softer black */ --accent-glow: rgba(0,0,0,0.05); --border: #d1cdc4; /* elegant thin gridlines */ --border-light: #e5e2da; --radius: 4px; /* flat, sharp minimalist corners */ /* ──────────────────────────────────────────────── 2 · WES ANDERSON ACCENT PALETTE Muted, sun-faded hues. Used ONLY for classification tags, collection markers, charts & status — never as primary UI chrome. The ink stays the protagonist. ──────────────────────────────────────────────── */ --wes-clay: #c25b43; /* terracotta / Grand Budapest red-pink */ --wes-mustard: #d6a13c; /* curry yellow */ --wes-rose: #cf8d86; /* dusty rose */ --wes-sage: #8f9a6c; /* faded olive / sage */ --wes-teal: #5d8a82; /* eucalyptus teal */ --wes-sky: #8aabbf; /* powder blue */ --wes-plum: #7e5e72; /* aubergine */ --wes-sand: #cbb994; /* dry grass */ /* darker, text-legible variants (use ON light surfaces) */ --wes-clay-ink: #a8462f; --wes-mustard-ink: #9a7320; --wes-rose-ink: #a85f57; --wes-sage-ink: #5f6a42; --wes-teal-ink: #3f6760; --wes-sky-ink: #4d7488; --wes-plum-ink: #5b4052; /* soft tints (10–14% — tag & badge backgrounds) */ --wes-clay-soft: rgba(194,91,67,0.13); --wes-mustard-soft: rgba(214,161,60,0.16); --wes-rose-soft: rgba(207,141,134,0.16); --wes-sage-soft: rgba(143,154,108,0.16); --wes-teal-soft: rgba(93,138,130,0.15); --wes-sky-soft: rgba(138,171,191,0.18); --wes-plum-soft: rgba(126,94,114,0.14); /* ──────────────────────────────────────────────── 3 · SEMANTIC ROLES (mapped onto the Wes palette) ──────────────────────────────────────────────── */ --ok: var(--wes-sage-ink); --ok-soft: var(--wes-sage-soft); --warn: var(--wes-mustard-ink); --warn-soft: var(--wes-mustard-soft); --info: var(--wes-sky-ink); --info-soft: var(--wes-sky-soft); --danger: var(--wes-clay-ink); --danger-soft:var(--wes-clay-soft); --agent: var(--wes-clay-ink); --agent-soft: var(--wes-clay-soft); /* ============================================================ 4 · LEGACY BRIDGE — original --arca-* token names Every existing component references these. Re-pointing them here flips the whole product from dark → eggshell with zero component edits. ============================================================ */ --arca-bg-0: var(--bg-deepest); /* page ground / sidebar rail */ --arca-bg-1: var(--bg-deepest); /* base canvas */ --arca-bg-2: var(--bg-surface); /* raised surface — cards */ --arca-bg-3: var(--bg-elevated); /* overlay — hover, inputs */ --arca-bg-4: #ded9cf; /* highest — active rows */ --arca-line: var(--border); --arca-line-strong: #c2bdb2; --arca-fg-0: var(--text-primary); --arca-fg-1: var(--text-secondary); --arca-fg-2: var(--text-muted); --arca-fg-3: #9a958b; /* accent → black ink (primary), agent presence → clay */ --arca-accent: var(--accent); --arca-accent-hover: var(--accent-hover); --arca-accent-press: #000000; --arca-accent-soft: var(--accent-glow); --arca-accent-line: rgba(0,0,0,0.22); --arca-info: var(--wes-sky-ink); --arca-info-soft: var(--wes-sky-soft); --arca-success: var(--wes-sage-ink); --arca-success-soft: var(--wes-sage-soft); --arca-warning: var(--wes-mustard-ink);--arca-warning-soft: var(--wes-mustard-soft); --arca-danger: var(--wes-clay-ink); --arca-danger-soft: var(--wes-clay-soft); /* ──────────────────────────────────────────────── 5 · TYPE (unchanged spirit: serif headings + sans UI) ──────────────────────────────────────────────── */ --arca-serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif; --arca-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --arca-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --font-serif: var(--arca-serif); --font-sans: var(--arca-sans); --font-mono: var(--arca-mono); --arca-fs-display: 2.75rem; /* 44 */ --arca-fs-h1: 2rem; /* 32 */ --arca-fs-h2: 1.5rem; /* 24 */ --arca-fs-h3: 1.1875rem; /* 19 */ --arca-fs-body: 0.9375rem; /* 15 — UI base */ --arca-fs-read: 1.125rem; /* 18 — document reading */ --arca-fs-sm: 0.8125rem; /* 13 */ --arca-fs-xs: 0.6875rem; /* 11 — overline / meta */ /* ──────────────────────────────────────────────── 6 · SPACING · RADIUS · SHADOW · MOTION ──────────────────────────────────────────────── */ --arca-s1: 4px; --arca-s2: 8px; --arca-s3: 12px; --arca-s4: 16px; --arca-s5: 24px; --arca-s6: 32px; --arca-s7: 48px; --arca-s8: 64px; --arca-r-sm: var(--radius); /* 4 — sharp, precise */ --arca-r-md: 6px; --arca-r-lg: 10px; --arca-r-pill: 999px; /* light layouts → soft, warm, lifted (no heavy dark drop) */ --arca-shadow-1: 0 1px 2px rgba(40,34,22,0.06); --arca-shadow-2: 0 4px 16px rgba(40,34,22,0.10); --arca-shadow-3: 0 18px 48px rgba(40,34,22,0.16); --shadow-card: var(--arca-shadow-2); --arca-ease: cubic-bezier(0.4, 0.0, 0.2, 1); --arca-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --arca-dur-1: 130ms; --arca-dur-2: 220ms; --arca-dur-3: 380ms; } /* ============================================================ BASE (light surface — paper-true) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } .arca, .arca-root { background: var(--arca-bg-1); color: var(--arca-fg-0); font-family: var(--arca-sans); font-size: var(--arca-fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .arca h1, .arca h2, .arca h3, .arca-h1, .arca-h2, .arca-h3 { font-family: var(--arca-serif); font-weight: 500; color: var(--arca-fg-0); line-height: 1.2; margin: 0; letter-spacing: -0.005em; } .arca-display { font-family: var(--arca-serif); font-weight: 500; font-size: var(--arca-fs-display); line-height: 1.1; letter-spacing: -0.01em; } .arca-h1 { font-size: var(--arca-fs-h1); } .arca-h2 { font-size: var(--arca-fs-h2); } .arca-h3 { font-size: var(--arca-fs-h3); } .arca-overline { font-family: var(--arca-sans); font-size: var(--arca-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--arca-fg-2); } .arca-mono { font-family: var(--arca-mono); font-size: var(--arca-fs-sm); } .arca-read { font-family: var(--arca-serif); font-size: var(--arca-fs-read); line-height: 1.7; color: var(--arca-fg-0); max-width: 68ch; } .arca a { color: var(--arca-info); text-decoration: none; } .arca a:hover { text-decoration: underline; text-underline-offset: 0.18em; } ::selection { background: rgba(194,91,67,0.22); color: var(--arca-fg-0); } /* scrollbars — light */ .arca *::-webkit-scrollbar { width: 10px; height: 10px; } .arca *::-webkit-scrollbar-thumb { background: #cfc9bd; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .arca *::-webkit-scrollbar-thumb:hover { background: #b9b2a3; background-clip: padding-box; } .arca *::-webkit-scrollbar-track { background: transparent; }