/* Kneipenfood Brand Tokens — v2.0 Hessisch Lichtenau · 2025 Import: @import "brand-tokens.css"; Verwendung: color: var(--kf-bordeaux); padding: var(--kf-space-md); */ :root { /* === COLORS === */ --kf-bordeaux: #6E1825; --kf-bordeaux-deep: #4A0E18; --kf-bordeaux-soft: rgba(110, 24, 37, 0.08); --kf-wood: #2A1810; --kf-wood-mid: #4A2E1F; --kf-wood-soft: rgba(42, 24, 16, 0.06); --kf-brass: #B08A40; --kf-brass-light: #C9A562; --kf-paper: #F0E3C8; --kf-paper-dark: #DCC9A4; --kf-paper-light: #F8F0DC; --kf-cream: #FAF5E6; --kf-chalk: #F5EDD8; --kf-ink: #1A0F08; /* Semantic */ --kf-success: #5BAD7A; --kf-success-soft: rgba(91, 173, 122, 0.12); --kf-warn: #C8973A; --kf-warn-soft: rgba(200, 151, 58, 0.14); --kf-error: #B5333E; --kf-error-soft: rgba(181, 51, 62, 0.10); --kf-info: #5A6E7A; --kf-info-soft: rgba(90, 110, 122, 0.10); /* === TYPOGRAPHY === */ --kf-font-display: 'Big Shoulders Display', 'Impact', sans-serif; --kf-font-italic: 'Playfair Display', 'Georgia', serif; --kf-font-body: 'Inter', system-ui, -apple-system, sans-serif; --kf-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Type scale (rem-based) */ --kf-text-xs: 0.72rem; /* 11.5 px */ --kf-text-sm: 0.85rem; /* 13.5 px */ --kf-text-base: 1rem; /* 16 px */ --kf-text-md: 1.125rem; /* 18 px */ --kf-text-lg: 1.5rem; /* 24 px */ --kf-text-xl: 2rem; /* 32 px */ --kf-text-2xl: 2.6rem; /* 41 px */ --kf-text-3xl: 3.6rem; /* 57 px */ --kf-text-display: 5rem; /* 80 px */ --kf-weight-regular: 400; --kf-weight-medium: 500; --kf-weight-semibold: 600; --kf-weight-bold: 700; --kf-weight-display: 900; --kf-track-tight: -0.005em; --kf-track-normal: 0; --kf-track-loose: 0.04em; --kf-track-stencil: 0.18em; --kf-track-stamp: 0.3em; /* === SPACING (4 px base grid) === */ --kf-space-1: 4px; --kf-space-2: 8px; --kf-space-3: 12px; --kf-space-4: 16px; --kf-space-5: 20px; --kf-space-6: 24px; --kf-space-7: 28px; --kf-space-8: 32px; --kf-space-10: 40px; --kf-space-12: 48px; --kf-space-16: 64px; --kf-space-20: 80px; --kf-space-24: 96px; --kf-space-32: 128px; /* Aliases */ --kf-space-xs: var(--kf-space-2); --kf-space-sm: var(--kf-space-4); --kf-space-md: var(--kf-space-6); --kf-space-lg: var(--kf-space-10); --kf-space-xl: var(--kf-space-16); --kf-space-2xl: var(--kf-space-24); /* === RADII === */ --kf-radius-none: 0; --kf-radius-sm: 4px; --kf-radius-md: 8px; --kf-radius-lg: 12px; --kf-radius-xl: 16px; --kf-radius-pill: 9999px; /* === ELEVATION (shadows) === */ --kf-shadow-none: 0 0 0 transparent; --kf-shadow-sm: 0 2px 6px rgba(42, 24, 16, 0.06); --kf-shadow-md: 0 8px 24px rgba(42, 24, 16, 0.10); --kf-shadow-lg: 0 16px 56px rgba(42, 24, 16, 0.14); --kf-shadow-xl: 0 30px 80px rgba(42, 24, 16, 0.18); --kf-shadow-button: 0 4px 12px rgba(110, 24, 37, 0.22); --kf-shadow-glass: 0 30px 80px -10px rgba(42, 24, 16, 0.45), 0 8px 24px rgba(42, 24, 16, 0.25); --kf-shadow-focus: 0 0 0 3px rgba(110, 24, 37, 0.25); /* === BORDER === */ --kf-border-1: 1px solid var(--kf-paper-dark); --kf-border-2: 2px solid var(--kf-paper-dark); --kf-border-strong: 1.5px solid var(--kf-wood); --kf-border-bordeaux: 1.5px solid var(--kf-bordeaux); /* === MOTION === */ --kf-motion-instant: 80ms; --kf-motion-fast: 160ms; --kf-motion-medium: 260ms; --kf-motion-slow: 400ms; --kf-motion-slower: 600ms; --kf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* like decel */ --kf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* like easeInOut */ --kf-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */ /* === LAYOUT === */ --kf-container-sm: 640px; --kf-container-md: 920px; --kf-container-lg: 1200px; --kf-container-xl: 1440px; /* Breakpoints (for reference; use in @media) */ --kf-bp-sm: 480px; --kf-bp-md: 720px; --kf-bp-lg: 980px; --kf-bp-xl: 1200px; /* Z-index scale */ --kf-z-base: 0; --kf-z-dropdown: 10; --kf-z-sticky: 20; --kf-z-overlay: 100; --kf-z-modal: 200; --kf-z-toast: 300; } /* === BASE UTILITY CLASSES === */ .kf-display { font-family: var(--kf-font-display); font-weight: var(--kf-weight-display); text-transform: uppercase; letter-spacing: var(--kf-track-tight); line-height: 0.95; } .kf-italic { font-family: var(--kf-font-italic); font-style: italic; font-weight: var(--kf-weight-regular); } .kf-body { font-family: var(--kf-font-body); font-weight: var(--kf-weight-regular); line-height: 1.55; } .kf-stencil { font-family: var(--kf-font-body); font-weight: var(--kf-weight-bold); text-transform: uppercase; letter-spacing: var(--kf-track-stencil); font-size: var(--kf-text-xs); color: var(--kf-bordeaux); } .kf-stamp-claim { font-family: var(--kf-font-body); font-weight: var(--kf-weight-bold); text-transform: uppercase; letter-spacing: var(--kf-track-stamp); font-size: var(--kf-text-xs); color: var(--kf-brass); display: inline-flex; align-items: center; gap: 14px; } .kf-stamp-claim::before, .kf-stamp-claim::after { content: ""; height: 1px; width: 28px; background: currentColor; } /* === LAYOUT PRIMITIVES === */ .kf-container { max-width: var(--kf-container-md); margin: 0 auto; padding: 0 var(--kf-space-6); } .kf-container--lg { max-width: var(--kf-container-lg); } .kf-container--sm { max-width: var(--kf-container-sm); } .kf-stack > * + * { margin-top: var(--kf-stack-gap, var(--kf-space-4)); } .kf-stack--sm > * + * { --kf-stack-gap: var(--kf-space-2); } .kf-stack--lg > * + * { --kf-stack-gap: var(--kf-space-8); } .kf-stack--xl > * + * { --kf-stack-gap: var(--kf-space-16); } .kf-cluster { display: flex; flex-wrap: wrap; gap: var(--kf-space-4); align-items: center; } .kf-cluster--tight { gap: var(--kf-space-2); } .kf-grid { display: grid; gap: var(--kf-space-6); } .kf-grid--2 { grid-template-columns: repeat(2, 1fr); } .kf-grid--3 { grid-template-columns: repeat(3, 1fr); } .kf-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 720px) { .kf-grid--2, .kf-grid--3, .kf-grid--4 { grid-template-columns: 1fr; } }