/* ========================================================================== Notes Design System — Colors & Type Light mode is default. Toggle dark via [data-theme="dark"] on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap'); /* --- Light mode (default) ------------------------------------------------ */ :root { /* Surfaces — warm paper tones */ --bg: #faf8f4; /* page */ --surface: #ffffff; /* cards, sheets */ --surface-2: #f1ede5; /* hover, subtle fills */ --surface-3: #e6e0d3; /* pressed, dividers' heavier cousin */ /* Foreground — soft black, no pure #000 */ --fg-1: #1f1d1a; /* primary text, headings */ --fg-2: #4a463f; /* subheads */ --fg-3: #75706a; /* body, secondary */ --fg-4: #a39e95; /* tertiary, placeholders */ /* Lines */ --line: #e6e0d3; --line-strong: #d4ccbc; /* Accent — single muted ink-blue. One color, used sparingly. */ --accent: #4a6fa5; --accent-soft: #e8eef6; /* Semantic — kept very gentle */ --warn: #b87333; --danger: #a14d4d; /* Selection */ --selection-bg: #fde8b8; --selection-fg: #1f1d1a; /* Type system */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --fs-display: 28px; --fs-h1: 20px; --fs-h2: 16px; --fs-h3: 14px; --fs-body: 14px; --fs-small: 12px; --fs-tiny: 11px; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.6; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* Spacing — 4px base */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; /* Radii — gentle, not pill */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* Shadows — almost imperceptible */ --shadow-1: 0 1px 0 rgba(31, 29, 26, 0.04); --shadow-2: 0 2px 8px rgba(31, 29, 26, 0.06); --shadow-3: 0 8px 24px rgba(31, 29, 26, 0.08); /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* --- Dark mode ----------------------------------------------------------- */ [data-theme="dark"] { --bg: #1a1916; --surface: #232220; --surface-2: #2c2a27; --surface-3: #3a3733; --fg-1: #ece7dd; --fg-2: #c5bfb3; --fg-3: #948e83; --fg-4: #6b665e; --line: #2c2a27; --line-strong: #3a3733; --accent: #8aa9d6; --accent-soft: #2a3344; --warn: #d4955a; --danger: #c47878; --selection-bg: #5a4a1f; --selection-fg: #ece7dd; --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.2); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.35); } /* --- Base ---------------------------------------------------------------- */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-mono); font-weight: var(--weight-light); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "ss02"; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* --- Semantic typography ------------------------------------------------- */ .t-display { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-h1 { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--fg-1); } .t-h2 { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); } .t-subhead { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-2); } .t-body { font-family: var(--font-mono); font-weight: var(--weight-light); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); } .t-meta { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--fg-3); letter-spacing: var(--tracking-wide); } .t-caption { font-family: var(--font-mono); font-weight: var(--weight-light); font-size: var(--fs-tiny); line-height: var(--lh-snug); color: var(--fg-4); }