/* ============================================================= Karbonat Material Design — Colors & Type A Material Design 3 system re-skinned with a Black / White / Grey / Canary Yellow palette. Tokens follow MD3 conventions: md-ref-* (raw palette), md-sys-* (semantic), md-comp-* (component). ============================================================= */ /* ---------- 1. Typeface ---------- DM Sans is the brand typeface. Variable font with opsz + wght axes, plus a matching italic. It serves both display (large opsz, lower wght) and body (small opsz, regular wght) — so brand and plain collapse to the same family. Roboto Mono (Google Fonts) is used for code; if you need to self-host, drop a mono.ttf into fonts/. */ @font-face { font-family: "DM Sans"; src: url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype-variations"); font-weight: 100 1000; font-stretch: 75% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"); font-weight: 100 1000; font-stretch: 75% 125%; font-style: italic; font-display: swap; } @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap"); :root { /* MD3 reference typefaces. "brand" is reserved for display/headline, "plain" for body/label. Karbonat collapses both to DM Sans — the variable opsz axis makes a single family work cleanly across 11px caption and 57px display. */ --md-ref-typeface-brand: "DM Sans", system-ui, sans-serif; --md-ref-typeface-plain: "DM Sans", system-ui, -apple-system, sans-serif; --md-ref-typeface-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace; --md-ref-typeface-weight-regular: 400; --md-ref-typeface-weight-medium: 500; --md-ref-typeface-weight-bold: 700; } /* ---------- 2. Reference palette (raw swatches) ---------- Karbonat palette is intentionally tight: a near-true neutral ramp + a single chromatic accent (Canary). No purples, no tertiary hue. The neutral ramp is *cool-neutral* (slight blue undertone) so canary reads warm against it. */ :root { /* Karbonat brand */ --kb-canary: #FFEF00; /* Canary Yellow — brand primary */ --kb-canary-bright: #FFF952; /* lighter tint, used for hover/highlight */ --kb-canary-deep: #E5D200; /* pressed / focused */ --kb-canary-soft: #FFF9C4; /* container fill (light theme) */ --kb-canary-dark: #4A4200; /* on-canary-container text */ /* Neutral ramp — cool grey, 11 stops (matches MD ref palette) */ --kb-neutral-0: #000000; --kb-neutral-10: #0A0A0A; /* "Black" used in copy */ --kb-neutral-20: #1F1F1F; /* "Dark Grey" */ --kb-neutral-30: #2A2A2A; --kb-neutral-40: #494949; --kb-neutral-50: #6B6B6B; --kb-neutral-60: #8A8A8A; --kb-neutral-70: #A3A3A3; --kb-neutral-80: #C7C7C7; --kb-neutral-90: #E5E5E5; /* "Light Grey" */ --kb-neutral-95: #F2F2F2; --kb-neutral-98: #FAFAFA; --kb-neutral-100: #FFFFFF; /* "White" */ /* Semantic error (MD3 keeps red even in monochrome systems) */ --kb-error-40: #BA1A1A; --kb-error-80: #FFB4AB; --kb-error-90: #FFDAD6; --kb-error-10: #410002; } /* ---------- 3. System color tokens — LIGHT theme (default) ---------- */ :root, [data-theme="light"] { /* Primary (Canary) */ --md-sys-color-primary: var(--kb-canary); --md-sys-color-on-primary: var(--kb-neutral-10); --md-sys-color-primary-container: var(--kb-canary-soft); --md-sys-color-on-primary-container: var(--kb-canary-dark); /* Secondary — neutral dark (used for filled-tonal surfaces) */ --md-sys-color-secondary: var(--kb-neutral-20); --md-sys-color-on-secondary: var(--kb-neutral-100); --md-sys-color-secondary-container: var(--kb-neutral-90); --md-sys-color-on-secondary-container: var(--kb-neutral-10); /* Tertiary — same as primary in this restrained system, but slightly deeper. Kept distinct so MD components don't break. */ --md-sys-color-tertiary: var(--kb-canary-deep); --md-sys-color-on-tertiary: var(--kb-neutral-10); --md-sys-color-tertiary-container: var(--kb-canary-soft); --md-sys-color-on-tertiary-container: var(--kb-canary-dark); /* Surface ramp (MD3 expressive uses many tiers) */ --md-sys-color-background: var(--kb-neutral-100); --md-sys-color-on-background: var(--kb-neutral-10); --md-sys-color-surface: var(--kb-neutral-100); --md-sys-color-on-surface: var(--kb-neutral-10); --md-sys-color-surface-dim: var(--kb-neutral-90); --md-sys-color-surface-bright: var(--kb-neutral-100); --md-sys-color-surface-container-lowest: var(--kb-neutral-100); --md-sys-color-surface-container-low: var(--kb-neutral-98); --md-sys-color-surface-container: var(--kb-neutral-95); --md-sys-color-surface-container-high: #ECECEC; --md-sys-color-surface-container-highest: var(--kb-neutral-90); --md-sys-color-surface-variant: var(--kb-neutral-90); --md-sys-color-on-surface-variant: var(--kb-neutral-40); --md-sys-color-outline: var(--kb-neutral-60); --md-sys-color-outline-variant: var(--kb-neutral-80); --md-sys-color-inverse-surface: var(--kb-neutral-20); --md-sys-color-inverse-on-surface: var(--kb-neutral-95); --md-sys-color-inverse-primary: var(--kb-canary-bright); --md-sys-color-error: var(--kb-error-40); --md-sys-color-on-error: var(--kb-neutral-100); --md-sys-color-error-container: var(--kb-error-90); --md-sys-color-on-error-container: var(--kb-error-10); --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; } /* ---------- 4. System color tokens — DARK theme ---------- */ [data-theme="dark"] { --md-sys-color-primary: var(--kb-canary); --md-sys-color-on-primary: var(--kb-neutral-10); --md-sys-color-primary-container: #6B6300; --md-sys-color-on-primary-container: #FFF6A6; --md-sys-color-secondary: var(--kb-neutral-90); --md-sys-color-on-secondary: var(--kb-neutral-10); --md-sys-color-secondary-container: var(--kb-neutral-30); --md-sys-color-on-secondary-container: var(--kb-neutral-90); --md-sys-color-tertiary: var(--kb-canary-bright); --md-sys-color-on-tertiary: var(--kb-neutral-10); --md-sys-color-tertiary-container: #4A4200; --md-sys-color-on-tertiary-container: #FFF6A6; --md-sys-color-background: var(--kb-neutral-10); --md-sys-color-on-background: var(--kb-neutral-95); --md-sys-color-surface: var(--kb-neutral-10); --md-sys-color-on-surface: var(--kb-neutral-95); --md-sys-color-surface-dim: var(--kb-neutral-10); --md-sys-color-surface-bright: #3A3A3A; --md-sys-color-surface-container-lowest: #050505; --md-sys-color-surface-container-low: var(--kb-neutral-20); --md-sys-color-surface-container: #232323; --md-sys-color-surface-container-high: var(--kb-neutral-30); --md-sys-color-surface-container-highest: #353535; --md-sys-color-surface-variant: var(--kb-neutral-30); --md-sys-color-on-surface-variant: var(--kb-neutral-80); --md-sys-color-outline: var(--kb-neutral-60); --md-sys-color-outline-variant: var(--kb-neutral-40); --md-sys-color-inverse-surface: var(--kb-neutral-90); --md-sys-color-inverse-on-surface: var(--kb-neutral-20); --md-sys-color-inverse-primary: var(--kb-canary-deep); --md-sys-color-error: var(--kb-error-80); --md-sys-color-on-error: var(--kb-error-10); --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: var(--kb-error-90); } /* ---------- 5. Typescale tokens ---------- MD3 typescale: 5 roles × 3 sizes. Karbonat uses DM Sans across the whole scale (brand + plain map to the same family). The variable opsz axis is the secret weapon — set it via font-variation-settings if you want the display sizes to use a wider optical grade. */ :root { /* Display — page-level hero text. DM Sans, regular weight. */ --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-large-size: 57px; --md-sys-typescale-display-large-line-height: 64px; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-tracking: -0.25px; --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-medium-size: 45px; --md-sys-typescale-display-medium-line-height: 52px; --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-medium-tracking: 0; --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-small-size: 36px; --md-sys-typescale-display-small-line-height: 44px; --md-sys-typescale-display-small-weight: 400; /* Headline — section heads. */ --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-large-size: 32px; --md-sys-typescale-headline-large-line-height: 40px; --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line-height: 36px; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-line-height: 32px; --md-sys-typescale-headline-small-weight: 400; /* Title — card heads, dialog titles, list section heads. */ --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-line-height: 28px; --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-line-height: 24px; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-tracking: 0.15px; --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-small-size: 14px; --md-sys-typescale-title-small-line-height: 20px; --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-title-small-tracking: 0.1px; /* Body — paragraph copy. */ --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-line-height: 24px; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-tracking: 0.5px; --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-line-height: 20px; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-tracking: 0.25px; --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-small-size: 12px; --md-sys-typescale-body-small-line-height: 16px; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-tracking: 0.4px; /* Label — buttons, chips, tabs, captions. */ --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-line-height: 20px; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-tracking: 0.1px; --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-line-height: 16px; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-tracking: 0.5px; --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-line-height: 16px; --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-tracking: 0.5px; } /* ---------- 6. Spacing, shape & elevation ---------- MD3 shape uses 7 scale stops. Karbonat keeps them but leans slightly more rectilinear (less rounded) for editorial weight. */ :root { /* Spacing — 4-pt grid, 8-pt rhythm */ --md-sys-spacing-1: 4px; --md-sys-spacing-2: 8px; --md-sys-spacing-3: 12px; --md-sys-spacing-4: 16px; --md-sys-spacing-5: 20px; --md-sys-spacing-6: 24px; --md-sys-spacing-8: 32px; --md-sys-spacing-10: 40px; --md-sys-spacing-12: 48px; --md-sys-spacing-16: 64px; --md-sys-spacing-20: 80px; --md-sys-spacing-24: 96px; /* Shape — corner radius scale */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; /* Elevation — MD3 uses 6 levels of layered, ambient + key shadows. Karbonat softens them: shorter Y-offset, lower opacity, cooler. */ --md-sys-elevation-0: none; --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04); --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06); --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.08); --md-sys-elevation-4: 0 2px 4px rgba(0,0,0,0.08), 0 6px 10px rgba(0,0,0,0.10); --md-sys-elevation-5: 0 4px 6px rgba(0,0,0,0.10), 0 10px 16px rgba(0,0,0,0.12); /* State-layer opacities (MD3 standard) */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.12; --md-sys-state-pressed-opacity: 0.12; --md-sys-state-dragged-opacity: 0.16; /* Motion — durations */ --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms; --md-sys-motion-duration-long1: 450ms; /* Motion — easings (MD3 "emphasized" + standard) */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1); --md-sys-motion-easing-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); } /* ---------- 7. Semantic / utility classes ---------- Drop-in classes that apply the typescale + colors. */ .md-typescale-display-large { font: 400 57px/64px var(--md-ref-typeface-brand); letter-spacing: -0.25px; } .md-typescale-display-medium { font: 400 45px/52px var(--md-ref-typeface-brand); } .md-typescale-display-small { font: 400 36px/44px var(--md-ref-typeface-brand); } .md-typescale-headline-large { font: 400 32px/40px var(--md-ref-typeface-brand); } .md-typescale-headline-medium { font: 400 28px/36px var(--md-ref-typeface-brand); } .md-typescale-headline-small { font: 400 24px/32px var(--md-ref-typeface-brand); } .md-typescale-title-large { font: 400 22px/28px var(--md-ref-typeface-brand); } .md-typescale-title-medium { font: 500 16px/24px var(--md-ref-typeface-plain); letter-spacing: 0.15px; } .md-typescale-title-small { font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.1px; } .md-typescale-body-large { font: 400 16px/24px var(--md-ref-typeface-plain); letter-spacing: 0.5px; } .md-typescale-body-medium { font: 400 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.25px; } .md-typescale-body-small { font: 400 12px/16px var(--md-ref-typeface-plain); letter-spacing: 0.4px; } .md-typescale-label-large { font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.1px; } .md-typescale-label-medium { font: 500 12px/16px var(--md-ref-typeface-plain); letter-spacing: 0.5px; } .md-typescale-label-small { font: 500 11px/16px var(--md-ref-typeface-plain); letter-spacing: 0.5px; } /* Semantic shortcuts a la legacy "h1", "p", "code" */ h1 { font: 400 57px/64px var(--md-ref-typeface-brand); letter-spacing: -0.25px; margin: 0; } h2 { font: 400 45px/52px var(--md-ref-typeface-brand); margin: 0; } h3 { font: 400 32px/40px var(--md-ref-typeface-brand); margin: 0; } h4 { font: 400 24px/32px var(--md-ref-typeface-brand); margin: 0; } h5 { font: 400 22px/28px var(--md-ref-typeface-brand); margin: 0; } h6 { font: 500 16px/24px var(--md-ref-typeface-plain); letter-spacing: 0.15px; margin: 0; } p { font: 400 16px/24px var(--md-ref-typeface-plain); letter-spacing: 0.5px; margin: 0; } code, pre, kbd { font-family: var(--md-ref-typeface-mono); } /* Body base */ body { background: var(--md-sys-color-background); color: var(--md-sys-color-on-background); font: 400 16px/24px var(--md-ref-typeface-plain); letter-spacing: 0.5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }