/* * NodeFlowing Design System — Colors & Typography Tokens * Inter Variable loaded from Google Fonts (substitute for Inter Variable TTF) * NOTE: For production, replace with self-hosted Inter Variable font files. */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); /* ─── GLOBAL FONT FEATURE SETTINGS ─── */ * { font-feature-settings: "cv01", "ss03"; } /* ─── ROOT TOKENS ─── */ :root { /* == BACKGROUND SURFACES == */ --bg-marketing: #191d21; /* Primary page background */ --bg-panel: #1a1e23; /* Nav, sidebars */ --bg-surface: #1e2328; /* Cards, dropdowns, code blocks */ --bg-hover: #252a30; /* Hover state surfaces */ /* == TEXT == */ --text-primary: #f7f8f8; /* Main headings and body text */ --text-secondary: #d0d6e0; /* Body text, nav links */ --text-tertiary: #8a8f98; /* Muted descriptions, placeholders */ --text-quaternary: #62666d; /* Timestamps, disabled, very subtle */ /* == BRAND ACCENT — ORANGE == */ --orange: #fe6b35; /* Primary CTA background */ --orange-hover: #ff8050; /* CTA hover state */ /* == BRAND ACCENT — BLUE == */ --blue: #00448d; /* Secondary CTA, logo text color */ --blue-dark: #0b3258; /* Deep blue bg for blue elements */ --blue-light: #73b2cd; /* Decorative / alternate logo palette */ /* == WARM NEUTRAL == */ --cream: #f3dfbf; /* Warm badge bg, alternate logo palette */ /* == BORDERS == */ --border-solid-1: #23252a; /* Prominent solid separator */ --border-solid-2: #2e3238; /* Lighter solid border */ --border-subtle: rgba(255, 255, 255, 0.05); /* Default ghost border */ --border-standard: rgba(255, 255, 255, 0.08); /* Cards, inputs */ /* == OVERLAYS == */ --overlay-primary: rgba(0, 0, 0, 0.85); /* Modal/dialog backdrop */ /* == SURFACE ALPHAS (for cards etc) == */ --surface-alpha-1: rgba(255, 255, 255, 0.02); --surface-alpha-2: rgba(255, 255, 255, 0.04); --surface-alpha-3: rgba(255, 255, 255, 0.05); /* ─── TYPOGRAPHY ─── */ /* == FONT FAMILY == */ --font-sans: "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* == FONT WEIGHTS == */ --weight-light: 300; --weight-regular: 400; --weight-medium: 510; /* Workhorse weight — between Regular and Medium */ --weight-semibold: 590; /* Max weight in the system */ /* == TYPE SCALE == */ /* Display XL */ --type-display-xl-size: 72px; --type-display-xl-weight: 510; --type-display-xl-lh: 1.00; --type-display-xl-ls: -1.584px; /* Display L */ --type-display-l-size: 64px; --type-display-l-weight: 510; --type-display-l-lh: 1.00; --type-display-l-ls: -1.408px; /* Display */ --type-display-size: 48px; --type-display-weight: 510; --type-display-lh: 1.00; --type-display-ls: -1.056px; /* Heading 1 */ --type-h1-size: 32px; --type-h1-weight: 400; --type-h1-lh: 1.13; --type-h1-ls: -0.704px; /* Heading 2 */ --type-h2-size: 24px; --type-h2-weight: 400; --type-h2-lh: 1.33; --type-h2-ls: -0.288px; /* Heading 3 */ --type-h3-size: 20px; --type-h3-weight: 590; --type-h3-lh: 1.33; --type-h3-ls: -0.24px; /* Body Large */ --type-body-lg-size: 18px; --type-body-lg-weight: 400; --type-body-lg-lh: 1.60; --type-body-lg-ls: -0.165px; /* Body */ --type-body-size: 16px; --type-body-weight: 400; --type-body-lh: 1.50; --type-body-ls: normal; /* Body Medium */ --type-body-md-size: 16px; --type-body-md-weight: 510; --type-body-md-lh: 1.50; --type-body-md-ls: normal; /* Small */ --type-small-size: 15px; --type-small-weight: 400; --type-small-lh: 1.60; --type-small-ls: -0.165px; /* Caption */ --type-caption-size: 13px; --type-caption-weight: 400; --type-caption-lh: 1.50; --type-caption-ls: -0.13px; /* Label */ --type-label-size: 12px; --type-label-weight: 510; --type-label-lh: 1.40; --type-label-ls: normal; /* ─── SPACING ─── */ --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-sm: 4px; --radius-btn: 6px; --radius-card: 10px; --radius-lg: 12px; --radius-pill: 9999px; /* ─── SHADOWS ─── */ --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04); --shadow-dropdown: 0 2px 8px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.3); --shadow-modal: 0 8px 64px rgba(0,0,0,0.6); } /* ─── SEMANTIC TYPE CLASSES ─── */ .t-display-xl { font-family: var(--font-sans); font-size: var(--type-display-xl-size); font-weight: var(--type-display-xl-weight); line-height: var(--type-display-xl-lh); letter-spacing: var(--type-display-xl-ls); font-feature-settings: "cv01", "ss03"; } .t-display-l { font-family: var(--font-sans); font-size: var(--type-display-l-size); font-weight: var(--type-display-l-weight); line-height: var(--type-display-l-lh); letter-spacing: var(--type-display-l-ls); font-feature-settings: "cv01", "ss03"; } .t-display { font-family: var(--font-sans); font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-lh); letter-spacing: var(--type-display-ls); font-feature-settings: "cv01", "ss03"; } .t-h1 { font-family: var(--font-sans); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); font-feature-settings: "cv01", "ss03"; } .t-h2 { font-family: var(--font-sans); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); font-feature-settings: "cv01", "ss03"; } .t-h3 { font-family: var(--font-sans); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); font-feature-settings: "cv01", "ss03"; } .t-body-lg { font-family: var(--font-sans); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-lh); letter-spacing: var(--type-body-lg-ls); font-feature-settings: "cv01", "ss03"; } .t-body { font-family: var(--font-sans); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); letter-spacing: var(--type-body-ls); font-feature-settings: "cv01", "ss03"; } .t-body-md { font-family: var(--font-sans); font-size: var(--type-body-md-size); font-weight: var(--type-body-md-weight); line-height: var(--type-body-md-lh); letter-spacing: var(--type-body-md-ls); font-feature-settings: "cv01", "ss03"; } .t-small { font-family: var(--font-sans); font-size: var(--type-small-size); font-weight: var(--type-small-weight); line-height: var(--type-small-lh); letter-spacing: var(--type-small-ls); font-feature-settings: "cv01", "ss03"; } .t-caption { font-family: var(--font-sans); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); font-feature-settings: "cv01", "ss03"; } .t-label { font-family: var(--font-sans); font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-lh); letter-spacing: var(--type-label-ls); font-feature-settings: "cv01", "ss03"; }