/* ========================================================================== Ledger — design tokens & base styles A calm, editorial mail workspace. One restrained accent (indigo). The mail is the content; the chrome stays quiet. Light = ink on paper, plus true dark. ========================================================================== */ :root { /* -- Accent: restrained indigo, not the generic terracotta -------------- */ --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #eef2ff; --accent-ring: rgba(79, 70, 229, 0.35); /* -- Neutrals (light) --------------------------------------------------- */ --bg: #fbfbfa; /* paper */ --bg-raised: #ffffff; --bg-sunken: #f3f3f1; --border: #e6e6e2; --border-strong: #d3d3cd; --text: #1b1b18; /* ink */ --text-muted: #6b6b64; --text-faint: #9a9a90; /* -- Status ------------------------------------------------------------- */ --danger: #c0392b; --danger-soft: #fdecea; --success: #1e7e57; --warning: #b7791f; /* -- Typography --------------------------------------------------------- */ /* Reading face for mail bodies & headings: characterful but legible. */ --font-read: "Iowan Old Style", "Palatino Linotype", "Georgia", serif; /* UI/chrome face: clean grotesque. */ --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Mono for addresses, counts, timestamps. */ --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.875rem; --fs-base: 0.9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.375rem; --fs-2xl: 1.875rem; --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; /* -- Space & shape ------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --radius: 8px; --radius-sm: 5px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(27,27,24,0.06), 0 1px 3px rgba(27,27,24,0.04); --shadow-md: 0 4px 12px rgba(27,27,24,0.08), 0 2px 4px rgba(27,27,24,0.04); --shadow-lg: 0 12px 32px rgba(27,27,24,0.12); --rail: 3px; /* the signature accent rail width */ --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1); } /* -- Dark mode: true dark, warm-neutral ink ------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #818cf8; --accent-hover: #a5b4fc; --accent-soft: #1e1b3a; --accent-ring: rgba(129, 140, 248, 0.4); --bg: #131312; --bg-raised: #1c1c1a; --bg-sunken: #0d0d0c; --border: #2c2c29; --border-strong: #3a3a36; --text: #ecebe6; --text-muted: #a3a29a; --text-faint: #6f6e67; --danger: #e06c5c; --success: #56b487; --warning: #d9a441; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 12px 32px rgba(0,0,0,0.6); } } /* Explicit theme override via [data-theme] on */ [data-theme="dark"] { --accent:#818cf8; --accent-hover:#a5b4fc; --accent-soft:#1e1b3a; --accent-ring:rgba(129,140,248,0.4); --bg:#131312; --bg-raised:#1c1c1a; --bg-sunken:#0d0d0c; --border:#2c2c29; --border-strong:#3a3a36; --text:#ecebe6; --text-muted:#a3a29a; --text-faint:#6f6e67; --danger:#e06c5c; --success:#56b487; --warning:#d9a441; --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow-md:0 4px 12px rgba(0,0,0,0.5); --shadow-lg:0 12px 32px rgba(0,0,0,0.6); } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* RTL support: flipping is handled by dir="rtl" on ; logical props below */ [dir="rtl"] { direction: rtl; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } /* Visible keyboard focus everywhere (accessibility floor). */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* Respect reduced motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Screen-reader-only utility. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== Reusable primitives ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.5rem 0.9rem; font-size: var(--fs-md); font-weight: 500; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background var(--transition), border-color var(--transition); white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--bg-sunken); text-decoration: none; } .btn-danger { background: var(--danger); color: #fff; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .field { margin-bottom: var(--sp-4); } .field label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); } .input { width: 100%; padding: 0.6rem 0.75rem; font-size: var(--fs-base); background: var(--bg-raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* Flash / alert messages */ .alert { padding: 0.7rem 0.9rem; border-radius: var(--radius); font-size: var(--fs-md); margin-bottom: var(--sp-4); border: 1px solid var(--border); } .alert-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .alert-success { background: var(--accent-soft); border-color: var(--success); color: var(--success); } .alert-info { background: var(--bg-sunken); } /* ========================================================================== Compact density (html[data-density="compact"]) — tightens the mail and Drive lists without touching the rest of the chrome. ========================================================================== */ [data-density="compact"] .thread-row { padding-top: 4px; padding-bottom: 4px; } [data-density="compact"] .thread-row .thread-snippet { display: none; } [data-density="compact"] .drv-row { padding-top: 3px; padding-bottom: 3px; } [data-density="compact"] .drv-ic { width: 24px; height: 24px; } [data-density="compact"] .drv-ic svg { width: 14px; height: 14px; }