/* ────────────────────────────────────────────────────────────────── Utopian Dashboard — Design System Inspired by the Anthropic design system: warm neutrals, generous whitespace, serif display + clean sans body, restrained accents. Theme: system preference by default, explicit override via [data-theme="light"|"dark"] on , persisted in localStorage. ────────────────────────────────────────────────────────────────── */ /* ── Tokens: dark theme (default) ── */ :root { /* Surfaces (warm near-blacks) */ --color-bg: #1a1a18; --color-bg-elevated: #232220; --color-bg-sunken: #141413; --color-surface: #232220; --color-surface-hover:#2a2926; --color-surface-alt: #1f1e1c; /* Borders */ --color-border: #353330; --color-border-strong:#46433f; --color-border-subtle:#2b2926; /* Text */ --color-text: #f5f3ed; --color-text-muted: #b8b4a8; --color-text-subtle: #807c72; --color-text-inverse: #1a1a18; /* Brand: Anthropic coral / clay */ --color-accent: #d97757; --color-accent-hover: #e08767; --color-accent-soft: rgba(217, 119, 87, 0.14); --color-accent-border: rgba(217, 119, 87, 0.4); /* Status */ --color-success: #6ba870; --color-success-soft: rgba(107, 168, 112, 0.16); --color-warning: #d4a14a; --color-warning-soft: rgba(212, 161, 74, 0.16); --color-danger: #d76060; --color-danger-soft: rgba(215, 96, 96, 0.16); --color-info: #7aa3d4; --color-info-soft: rgba(122, 163, 212, 0.16); --color-neutral-soft: rgba(184, 180, 168, 0.14); /* Typography */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-serif: "Source Serif 4", "Source Serif Pro", "Tiempos Headline", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; /* Type scale */ --fs-xs: 0.6875rem; /* 11 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem; /* 15 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.375rem; /* 22 */ --fs-2xl: 1.75rem; /* 28 */ --fs-3xl: 2.25rem; /* 36 */ --lh-tight: 1.2; --lh-snug: 1.4; --lh-base: 1.55; --lh-loose: 1.7; /* Spacing scale (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Radii */ --radius-sm: 0.25rem; --radius: 0.5rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-pill: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --shadow: 0 2px 8px rgba(0,0,0,0.32); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); /* Focus ring */ --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); /* Layout */ --sidebar-w: 16rem; /* Motion */ --transition: 150ms cubic-bezier(.2,.8,.2,1); } /* ── Light theme tokens ── */ :root[data-theme="light"] { --color-bg: #f7f5ee; /* warm cream */ --color-bg-elevated: #ffffff; --color-bg-sunken: #efece2; --color-surface: #ffffff; --color-surface-hover:#fbfaf3; --color-surface-alt: #f0ede3; --color-border: #e3dfd2; --color-border-strong:#cbc6b5; --color-border-subtle:#ece8db; --color-text: #1f1e1c; --color-text-muted: #5b574d; --color-text-subtle: #8a8576; --color-text-inverse: #ffffff; --color-accent: #c2552f; --color-accent-hover: #b04a26; --color-accent-soft: rgba(194, 85, 47, 0.10); --color-accent-border: rgba(194, 85, 47, 0.3); --color-success: #3f7a47; --color-success-soft: rgba(63, 122, 71, 0.12); --color-warning: #a87a1d; --color-warning-soft: rgba(168, 122, 29, 0.12); --color-danger: #b03a3a; --color-danger-soft: rgba(176, 58, 58, 0.10); --color-info: #3a6da6; --color-info-soft: rgba(58, 109, 166, 0.10); --color-neutral-soft: rgba(91, 87, 77, 0.10); --shadow-sm: 0 1px 2px rgba(31,30,28,0.06); --shadow: 0 2px 10px rgba(31,30,28,0.08); --shadow-lg: 0 12px 32px rgba(31,30,28,0.14); --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); } /* Light theme via system preference, when no explicit override */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg: #f7f5ee; --color-bg-elevated: #ffffff; --color-bg-sunken: #efece2; --color-surface: #ffffff; --color-surface-hover:#fbfaf3; --color-surface-alt: #f0ede3; --color-border: #e3dfd2; --color-border-strong:#cbc6b5; --color-border-subtle:#ece8db; --color-text: #1f1e1c; --color-text-muted: #5b574d; --color-text-subtle: #8a8576; --color-text-inverse: #ffffff; --color-accent: #c2552f; --color-accent-hover: #b04a26; --color-accent-soft: rgba(194, 85, 47, 0.10); --color-accent-border: rgba(194, 85, 47, 0.3); --color-success: #3f7a47; --color-success-soft: rgba(63, 122, 71, 0.12); --color-warning: #a87a1d; --color-warning-soft: rgba(168, 122, 29, 0.12); --color-danger: #b03a3a; --color-danger-soft: rgba(176, 58, 58, 0.10); --color-info: #3a6da6; --color-info-soft: rgba(58, 109, 166, 0.10); --color-neutral-soft: rgba(91, 87, 77, 0.10); --shadow-sm: 0 1px 2px rgba(31,30,28,0.06); --shadow: 0 2px 10px rgba(31,30,28,0.08); --shadow-lg: 0 12px 32px rgba(31,30,28,0.14); } } /* ── Theme transition (skip during initial load) ── */ :root.theme-ready, :root.theme-ready *, :root.theme-ready *::before, :root.theme-ready *::after { transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--color-bg); color: var(--color-text); } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; min-height: 100vh; } /* Display / serif headings */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } ::selection { background: var(--color-accent-soft); color: var(--color-text); } /* Universal focus ring (keyboard) */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* ── Tailwind 2.x utility overrides → token-driven ─────────────── */ /* These keep existing markup working while making it themeable. */ .bg-gray-950, .bg-gray-900 { background-color: var(--color-bg) !important; } .bg-gray-800 { background-color: var(--color-bg-elevated) !important; } .text-gray-200, .text-white { color: var(--color-text) !important; } .text-gray-300 { color: var(--color-text) !important; } .text-gray-400 { color: var(--color-text-muted) !important; } .text-gray-500 { color: var(--color-text-subtle) !important; } .text-blue-400 { color: var(--color-accent) !important; } .text-red-400 { color: var(--color-danger) !important; } .border-gray-800, .border-gray-700 { border-color: var(--color-border) !important; } .bg-blue-600 { background-color: var(--color-accent) !important; color: var(--color-text-inverse) !important; } .hover\:bg-blue-500:hover { background-color: var(--color-accent-hover) !important; } /* ── Layout: Sidebar + Main ── */ nav#sidebar { width: var(--sidebar-w) !important; background: var(--color-bg-sunken) !important; border-right: 1px solid var(--color-border) !important; } nav#sidebar .border-b, nav#sidebar .border-t { border-color: var(--color-border) !important; } main.ml-56 { margin-left: var(--sidebar-w) !important; } main { background: var(--color-bg) !important; padding: var(--space-7) !important; } /* Brand mark in sidebar */ nav#sidebar h1 { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); } nav#sidebar p { color: var(--color-text-subtle); font-size: var(--fs-xs); letter-spacing: 0.05em; text-transform: uppercase; } /* ── Nav links ── */ .nav-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); border-radius: var(--radius-md); transition: background-color var(--transition), color var(--transition); text-decoration: none; font-weight: 450; } .nav-link:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; } .nav-link.active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; box-shadow: inset 2px 0 0 var(--color-accent); } /* ── Theme toggle ── */ .theme-toggle { display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--fs-xs); font-family: inherit; cursor: pointer; transition: border-color var(--transition), color var(--transition), background-color var(--transition); text-align: left; } .theme-toggle:hover { border-color: var(--color-border-strong); color: var(--color-text); background: var(--color-surface-hover); } .theme-toggle__icon { display: inline-flex; width: 1rem; height: 1rem; flex-shrink: 0; } .theme-toggle__label { flex: 1; } .theme-toggle__hint { color: var(--color-text-subtle); font-size: var(--fs-xs); } /* Show only the current-theme icon */ .theme-toggle .icon-light { display: none; } .theme-toggle .icon-dark { display: inline-flex; } :root[data-theme="light"] .theme-toggle .icon-light { display: inline-flex; } :root[data-theme="light"] .theme-toggle .icon-dark { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-toggle .icon-light { display: inline-flex; } :root:not([data-theme]) .theme-toggle .icon-dark { display: none; } } /* ── Logout / footer button ── */ #logout-btn { width: 100%; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition), color var(--transition); font-family: inherit; } #logout-btn:hover { background: var(--color-surface-hover); color: var(--color-text); } /* ── Card ── */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); } .card-header { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); margin-bottom: var(--space-3); } /* ── Stat card ── */ .stat-value { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 500; color: var(--color-text); line-height: var(--lh-tight); letter-spacing: -0.02em; } .stat-label { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } /* ── Page heading ── */ main h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-2xl); letter-spacing: -0.02em; margin: 0 0 var(--space-6) 0; color: var(--color-text) !important; } /* ── Table ── */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); } .data-table thead th { text-align: left; padding: var(--space-3); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); white-space: nowrap; z-index: 1; } .data-table tbody td { padding: var(--space-3); font-size: var(--fs-sm); border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text); } .data-table tbody tr:hover td { background: var(--color-surface-hover); } .data-table tbody tr { cursor: pointer; } .data-table tbody tr:last-child td { border-bottom: none; } /* ── Badge ── */ .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; font-size: var(--fs-xs); font-weight: 500; border-radius: var(--radius-pill); white-space: nowrap; line-height: 1.5; border: 1px solid transparent; } .badge-blue { background: var(--color-info-soft); color: var(--color-info); } .badge-green { background: var(--color-success-soft); color: var(--color-success); } .badge-yellow { background: var(--color-warning-soft); color: var(--color-warning); } .badge-gray { background: var(--color-neutral-soft); color: var(--color-text-muted); } .badge-purple { background: var(--color-accent-soft); color: var(--color-accent); } .badge-red { background: var(--color-danger-soft); color: var(--color-danger); } /* ── Search input ── */ .search-input { width: 100%; padding: var(--space-3) var(--space-3) var(--space-3) 2.25rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--fs-sm); font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition); } .search-input::placeholder { color: var(--color-text-subtle); } .search-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } /* Generic