/* ============================================================ North7 Design System — Tokens (v2 — alpine + Space Grotesk) ------------------------------------------------------------ Three themes share the same accent hues; only neutrals, surfaces, and contrast values shift. Themes: :root, [data-theme="light"] — warm paper, alpine blue, campfire amber [data-theme="pastel"] — sand, washed alpine, washed amber [data-theme="dark"] — midnight blue, moonlit alpine, warm amber Modifier hooks (set on ): [data-density="compact|cosy|spacious"] — layout density [data-displayfont="grotesk|dmsans|plex|serif|mono"] — display font swap [data-cards="bordered|shadowed|flat"] — app-level, see DESIGN.md Conventions: - Single sans (Space Grotesk) + single mono (JetBrains Mono). - No italics anywhere (em, i, cite, dfn, address, var, q reset). - Pull the variable, not the hex. Always. ============================================================ */ /* ---------- Webfonts ---------- Self-hosted locally via css/fonts.css (linked before this file) — no Google Fonts CDN, so the app runs fully offline from file://. */ /* ============================================================ 1. BASE TOKENS (theme-independent) ============================================================ */ :root { /* ---------- Type families ---------- */ --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display: "Space Grotesk", var(--font-sans); /* swappable via [data-displayfont] */ /* ---------- Type scale (px-based) ---------- */ --text-xs: 12px; /* captions, eyebrow */ --text-sm: 14px; /* small UI, meta */ --text-base: 16px; /* body */ --text-md: 18px; /* lede / large body */ --text-lg: 22px; /* h4 */ --text-xl: 28px; /* h3 */ --text-2xl: 36px; /* h2 */ --text-3xl: 48px; /* h1 */ --text-4xl: 64px; /* hero / display */ /* ---------- Line heights ---------- */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --leading-loose: 1.7; /* ---------- Letter spacing ---------- */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-eyebrow: 0.12em; /* ---------- Font weights ---------- */ --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-sb: 600; --fw-bold: 700; /* ---------- Spacing (4px base) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------- Radii ---------- */ --radius-xs: 3px; /* inline chips, code */ --radius-sm: 6px; /* buttons, inputs */ --radius-md: 10px; /* cards (default) */ --radius-lg: 14px; /* large surfaces, modals */ --radius-xl: 20px; /* hero/cover panels */ --radius-pill: 999px; /* tags, avatars */ /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* default */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); /* mild overshoot — sparingly */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms; /* ---------- Layout (application-shell measurements) ---------- */ --content-narrow: 38rem; /* 608 — long-form reading */ --content-base: 62rem; /* 992 — standard articles */ --content-wide: 80rem; /* 1280 — galleries, apps */ --content-bleed: 96rem; /* 1536 — max */ --shell-header: 64px; --shell-footer: 56px; --shell-sidebar: 276px; --shell-sidebar-breakpoint: 900px; /* ---------- Density (layout rhythm) — swappable via [data-density] ---------- */ --pad-y: 64px; --pad-x: 40px; --gap-card: 24px; --gap-section: 72px; --line: 1.6; /* ---------- Brand accent ramps (data viz, tag dots, charts) ---------- */ --alpine-50: #E9F0F5; --alpine-100: #C9DBE6; --alpine-200: #9DBDD0; --alpine-300: #6F9DB8; --alpine-400: #4A819E; --alpine-500: #2C5F7B; /* light brand */ --alpine-600: #234B62; --alpine-700: #18384B; --alpine-800: #0E2536; --amber-50: #FBEFE4; --amber-100: #F5D8BD; --amber-200: #EAB28A; --amber-300: #DC8E5A; --amber-400: #C26B3C; /* light accent */ --amber-500: #A85A30; --amber-600: #8B4624; --amber-700: #5E2E15; --moss-500: #4F7A4F; --pine-500: #2E4D3A; --sky-500: #6FA0BD; --stone-500: #807A6E; --bark-500: #6A4A33; --ember-500: #C26B3C; --snow-500: #F6F4EF; } /* ---------- Density variants ---------- */ [data-density="compact"] { --pad-y: 40px; --pad-x: 32px; --gap-card: 16px; --gap-section: 48px; --line: 1.5; } [data-density="cosy"] { --pad-y: 64px; --pad-x: 40px; --gap-card: 24px; --gap-section: 72px; --line: 1.6; } [data-density="spacious"] { --pad-y: 96px; --pad-x: 56px; --gap-card: 32px; --gap-section: 112px; --line: 1.7; } /* ---------- Display-font alternates ---------- Default is Space Grotesk. Project decides whether to load the alternate webfont (DM Sans / IBM Plex Sans / Source Serif 4) — tokens.css only declares the family swap. */ [data-displayfont="grotesk"] { --font-display: "Space Grotesk", var(--font-sans); } [data-displayfont="dmsans"] { --font-display: "DM Sans", var(--font-sans); } [data-displayfont="plex"] { --font-display: "IBM Plex Sans", var(--font-sans); } [data-displayfont="serif"] { --font-display: "Source Serif 4", Georgia, serif; } [data-displayfont="mono"] { --font-display: "JetBrains Mono", var(--font-mono); } /* ============================================================ 2. THEME: LIGHT (default) — warm paper, alpine accents ============================================================ */ :root, [data-theme="light"] { /* Surfaces */ --bg-base: #F6F4EF; /* warm paper */ --bg-surface: #FFFFFF; /* card / elevated */ --bg-sunken: #EDEAE2; /* recessed (input bg) */ --bg-overlay: rgba(20, 28, 38, 0.42); /* Foreground */ --fg-1: #1A2533; /* primary text */ --fg-2: #4F5C6E; /* secondary */ --fg-3: #8A95A5; /* tertiary / disabled */ --fg-inverse: #FFFFFF; /* Borders */ --border-1: #E5E1D8; --border-2: #D6D1C5; --border-focus: #2C5F7B; /* Brand */ --primary: #2C5F7B; /* alpine blue */ --primary-hover: #234B62; --primary-soft: #DCE7ED; --primary-on: #FFFFFF; /* Accent */ --accent: #C26B3C; /* campfire amber */ --accent-hover: #A85A30; --accent-soft: #F5E3D6; --accent-on: #FFFFFF; /* Semantic */ --success: #4F7A4F; --success-soft: #E1ECE0; --warning: #B98A2E; --warning-soft: #F6EBCF; --danger: #A8493E; --danger-soft: #F2DDD8; --info: #3F6E8C; --info-soft: #DCE7EE; /* Outdoor palette (data viz / tags) — themed */ --moss: #4F7A4F; --pine: #2E4D3A; --sky: #6FA0BD; --stone: #807A6E; --bark: #6A4A33; --ember: #C26B3C; --snow: #F6F4EF; /* Shadows (cool-shifted, subtle) */ --shadow-xs: 0 1px 2px rgba(20, 28, 38, 0.04); --shadow-sm: 0 1px 2px rgba(20, 28, 38, 0.06), 0 1px 3px rgba(20, 28, 38, 0.04); --shadow-md: 0 4px 8px rgba(20, 28, 38, 0.06), 0 2px 4px rgba(20, 28, 38, 0.04); --shadow-lg: 0 12px 24px rgba(20, 28, 38, 0.08), 0 4px 8px rgba(20, 28, 38, 0.04); --shadow-xl: 0 24px 48px rgba(20, 28, 38, 0.12), 0 8px 16px rgba(20, 28, 38, 0.06); --shadow-inset: inset 0 1px 2px rgba(20, 28, 38, 0.06); } /* ============================================================ 3. THEME: PASTEL — sand, washed alpine, washed amber ============================================================ */ [data-theme="pastel"] { --bg-base: #EDE6D8; /* sand */ --bg-surface: #F7F2E8; --bg-sunken: #E2DAC8; --bg-overlay: rgba(46, 56, 69, 0.38); --fg-1: #2E3845; --fg-2: #66728A; --fg-3: #9AA3B5; --fg-inverse: #FFFFFF; --border-1: #D9CFBA; --border-2: #C5B99E; --border-focus: #7AA3B5; --primary: #7AA3B5; /* washed alpine */ --primary-hover: #5E8A9E; --primary-soft: #DDE8EE; --primary-on: #1F2A35; --accent: #E0A878; /* washed amber */ --accent-hover: #C7905F; --accent-soft: #F5E2CC; --accent-on: #2E3845; --success: #9CB89C; --success-soft: #E2ECDF; --warning: #E5C77E; --warning-soft: #F5E9C6; --danger: #C88579; --danger-soft: #EFD8D2; --info: #8FB5C9; --info-soft: #DEEAF0; --moss: #9CB89C; --pine: #6E8A78; --sky: #A6C2D2; --stone: #B2AB9C; --bark: #A88A6E; --ember: #E0A878; --snow: #F7F2E8; } /* ============================================================ 4. THEME: DARK — midnight blue, moonlit alpine ============================================================ */ [data-theme="dark"] { --bg-base: #142035; /* midnight blue */ --bg-surface: #1D2A47; /* lifted card */ --bg-sunken: #0D1729; /* recessed */ --bg-overlay: rgba(8, 14, 28, 0.65); --fg-1: #E8EEF7; /* moonlit cool white */ --fg-2: #A0AFC4; --fg-3: #6D7B92; --fg-inverse: #142035; --border-1: #283655; --border-2: #354574; --border-focus: #7DB4D8; --primary: #7DB4D8; /* moonlit alpine */ --primary-hover: #95C5E5; --primary-soft: #1F2D4D; --primary-on: #0D1729; --accent: #E8B888; /* warm amber — pops against blue */ --accent-hover: #F2C99B; --accent-soft: #2F2A1E; --accent-on: #0D1729; --success: #94C3A4; --success-soft: #1A2D26; --warning: #DDC07A; --warning-soft: #2A2818; --danger: #D89889; --danger-soft: #2D1E1B; --info: #9BC1D9; --info-soft: #1A2535; --moss: #94C3A4; --pine: #5E8975; --sky: #9BC1D9; --stone: #A39C8E; --bark: #BD9275; --ember: #E8B888; --snow: #E8EEF7; /* Shadows deepen — pure black at higher alpha */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.40); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.40); } /* ============================================================ 5. BASE RESET / TYPE ============================================================ */ html, body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-1); background: var(--bg-base); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; } /* ---------- Display & headings ---------- Sans-only. Weight carries character; no serif, no italics. */ .display, h1.display { font-family: var(--font-display); font-weight: var(--fw-sb); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-sb); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-sb); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h3, .h3 { font-weight: var(--fw-med); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg-1); } h4, .h4 { font-weight: var(--fw-med); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg-1); } p, .body { font-weight: var(--fw-reg); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-1); text-wrap: pretty; } .lead, .t-lede { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg-2); text-wrap: pretty; } small, .small { font-size: var(--text-sm); color: var(--fg-2); } .caption { font-size: var(--text-xs); color: var(--fg-3); letter-spacing: var(--tracking-wide); } .eyebrow { font-size: var(--text-xs); font-weight: var(--fw-med); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-2); } /* ---------- Code ---------- */ code, .code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; font-feature-settings: "calt", "ss01"; } code, .code { background: var(--bg-sunken); border: 1px solid var(--border-1); border-radius: var(--radius-xs); padding: 1px 6px; color: var(--fg-1); } pre { background: var(--bg-sunken); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; line-height: var(--leading-snug); } pre code { background: none; padding: 0; border: 0; } kbd { background: var(--bg-surface); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 1px 6px; font-size: 0.85em; color: var(--fg-1); } /* ---------- Links ---------- */ a { color: var(--primary); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--primary-hover); text-decoration: underline; } /* ---------- Kill italics globally — North7 has none ---------- */ em, i, cite, dfn, address, var, q { font-style: normal; } /* ---------- Quotes — light/minimal treatment, never italic ---------- */ blockquote { border-left: 2px solid var(--border-2); padding-left: var(--space-4); margin: var(--space-4) 0; color: var(--fg-2); font-style: normal; } /* ---------- Selection ---------- */ ::selection { background: var(--primary); color: var(--primary-on); } /* ---------- Focus rings — subtle but visible ---------- */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-xs); } /* ============================================================ 6. UTILITIES ============================================================ */ .fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .fg-primary { color: var(--primary); } .fg-accent { color: var(--accent); } .bg { background: var(--bg-base); } .surface { background: var(--bg-surface); } .sunken { background: var(--bg-sunken); }