/* theme.css - Homeaglow Admin design tokens (Claude/Anthropic design language). Loaded once in the host , before nav.css / components.css / section CSS. THREE TIERS: 1. Primitives (--c-*, --clay-*, raw scales) - raw values, never used directly by components 2. Semantic (--bg, --text, --accent, ...) - what components consume 3. Back-compat shims - legacy token names kept resolving to the new semantic values so the migration is safe LIGHT-FIRST, DARK-READY: the semantic layer lives in :root (light). A future dark theme overrides ONLY the semantic block under :root[data-theme="dark"] - primitives stay fixed. (Dark block is NOT built this pass.) Palette captured live from claude.ai (Claude Design System) + anthropic.com brand CSS. See /Users/alex/ui-overhaul-recon/claude-tokens.md. */ /* ============================================================================ TIER 1 - PRIMITIVES (raw, do not consume directly in component CSS) ============================================================================ */ :root { /* Warm gray ramp (hue ~45-60deg, the Claude ivory/slate family) */ --c-gray-0: #ffffff; --c-gray-25: #fbfbf9; --c-gray-50: #f8f8f6; /* ivory canvas */ --c-gray-75: #f4f4f1; --c-gray-100: #efeee9; --c-gray-150: #e8e6dc; /* warm hairline */ --c-gray-200: #e0ddd2; --c-gray-250: #d1cdc3; /* default border */ --c-gray-300: #bdb8ad; --c-gray-400: #a4a097; --c-gray-450: #8a8780; /* faint text */ --c-gray-500: #6e6c66; /* muted text */ --c-gray-600: #57554f; --c-gray-700: #3d3c38; --c-gray-800: #292824; --c-gray-850: #211f1d; --c-gray-900: #1a1916; /* near-black text */ --c-black: #141413; /* Clay (brand accent) */ --c-clay-50: #faf0eb; --c-clay-100: #f3dccf; --c-clay-300: #e3a98e; --c-clay-500: #d97757; /* clay */ --c-clay-600: #c6613f; /* clay emphasized / hover */ --c-clay-700: #a64f31; --c-clay-900: #5e3526; /* Status hues (warm-retuned, muted - not neon) */ --c-green-50: #eef4ea; --c-green-500: #5b8c4e; --c-green-600: #4a7340; --c-green-700: #38582f; --c-amber-50: #f9f0dd; --c-amber-500: #c08a2e; --c-amber-600: #9c6f24; --c-amber-700: #74521b; --c-red-50: #f8e9e6; --c-red-500: #c0492f; --c-red-600: #a23b25; --c-red-700: #7a2c1c; --c-blue-50: #e8eef5; --c-blue-500: #3f6f9c; --c-blue-600: #335a80; --c-blue-700: #284763; --c-plum-500: #7d6fb0; /* secondary / "pro" */ /* Typography primitives */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: Georgia, "Times New Roman", Times, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; /* default UI text */ --text-md: 14px; /* body / inputs */ --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 30px; /* serif page hero */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* Motion */ --ease: cubic-bezier(0, 0, .2, 1); --dur-fast: 120ms; --dur: 160ms; --dur-slow: 240ms; /* ========================================================================== TIER 2 - SEMANTIC (light). Components consume ONLY these. ========================================================================== */ --bg: var(--c-gray-50); /* page canvas (ivory) */ --surface: var(--c-gray-0); /* cards / elevated panels */ --surface-raised: var(--c-gray-0); /* menus / modals (white, lifted by shadow) */ --surface-sunken: var(--c-gray-75); /* wells, table header band, inset fields */ --surface-hover: var(--c-gray-100); /* row/control hover fill */ --border: var(--c-gray-150); /* default hairline */ --border-strong: var(--c-gray-250); /* emphasized divider / input border */ --text: var(--c-gray-900); /* primary */ --text-muted: var(--c-gray-500); /* secondary */ --text-faint: var(--c-gray-450); /* tertiary / placeholder */ --text-on-accent: #ffffff; /* text on clay/solid fills */ --accent: var(--c-clay-500); --accent-hover: var(--c-clay-600); --accent-active: var(--c-clay-700); --accent-tint: rgba(217, 119, 87, 0.10); /* clay @10% - soft fills, active nav */ --accent-tint-strong: rgba(217, 119, 87, 0.18); --accent-ring: rgba(217, 119, 87, 0.40); /* focus ring */ --accent-contrast-text: var(--c-clay-700); /* clay text on pale clay tint (AA) */ --secondary: var(--c-plum-500); --success: var(--c-green-600); --success-tint: rgba(91, 140, 78, 0.14); --warn: var(--c-amber-600); --warn-tint: rgba(192, 138, 46, 0.16); --danger: var(--c-red-500); --danger-hover: var(--c-red-600); --danger-tint: rgba(192, 73, 47, 0.12); --info: var(--c-blue-500); --info-tint: rgba(63, 111, 156, 0.12); --shadow-sm: 0 1px 2px rgba(40, 38, 34, 0.06); --shadow-md: 0 4px 12px rgba(40, 38, 34, 0.10), 0 1px 3px rgba(40, 38, 34, 0.06); --shadow-lg: 0 12px 32px rgba(40, 38, 34, 0.14), 0 4px 8px rgba(40, 38, 34, 0.06); --overlay: rgba(40, 38, 34, 0.40); /* modal backdrop */ color-scheme: light; /* ========================================================================== TIER 3 - BACK-COMPAT SHIMS Legacy token names (the original 11-var dark set) now resolve to the new semantic palette, so every existing var(--accent)/var(--green)/... consumer re-skins automatically. These are retired as consumers are migrated. ========================================================================== */ --text-dim: var(--text-muted); --muted: var(--text-faint); --green: var(--success); --yellow: var(--warn); --red: var(--danger); --orange: var(--accent); /* the only orange-ish brand color is now clay */ } /* ============================================================================ BASE RESETS (identical across all three pages historically; safe to share) ============================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); font-size: var(--text-md); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* Utility - verified identical across all three pages. */ .hidden { display: none !important; } /* Warm, slim scrollbars (Claude-like; net-new - none existed before) */ * { scrollbar-width: thin; scrollbar-color: var(--c-gray-300) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--c-gray-250); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--c-gray-300); background-clip: padding-box; } /* Shared focus-visible ring for keyboard users */ :focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }