/* ============================================================ Felimo Design System — Tokens (samengevoegd uit de DS-bundel) Volgorde: colors, typography, spacing, shadows, motion, radii. @font-face: self-hosted woff2 in assets/fonts/. ============================================================ */ /* ─── Self-hosted fonts ─────────────────────────────────────── */ @font-face { font-family: 'Cormorant Garamond'; src: url('/wp-content/themes/felimo/assets/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('/wp-content/themes/felimo/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('/wp-content/themes/felimo/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('/wp-content/themes/felimo/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('/wp-content/themes/felimo/assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('/wp-content/themes/felimo/assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('/wp-content/themes/felimo/assets/fonts/dm-sans-latin-wght-italic.woff2') format('woff2-variations'); font-weight: 100 1000; font-style: italic; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('/wp-content/themes/felimo/assets/fonts/dm-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('/wp-content/themes/felimo/assets/fonts/dm-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* Felimo — Color Tokens * Base palette + semantic aliases * Do not use base values directly in components; prefer semantic tokens. */ :root { /* ─── Base: Warm Neutrals ───────────────────────────────────── */ --felimo-white: #fdfcfa; --felimo-bone: #f5f0e8; --felimo-linen: #ede6d8; --felimo-cream: #e8dfd1; --felimo-mist: #d4cfc8; --felimo-silver: #b0aba4; --felimo-ash: #797570; --felimo-smoke: #3d3a35; --felimo-charcoal: #1e1c19; --felimo-void: #0e0d0b; /* ─── Base: Amber / Gold accent ────────────────────────────── */ --felimo-amber-50: #fdf4e3; --felimo-amber-100: #f7e0b8; --felimo-amber-200: #efc885; --felimo-amber-300: #e0b05a; --felimo-amber-400: #d09640; --felimo-amber-500: #c4893a; /* brand accent */ --felimo-amber-600: #a86e26; --felimo-amber-700: #8a531a; --felimo-amber-800: #6b3b10; --felimo-amber-900: #4d2509; /* ─── Base: State colors ────────────────────────────────────── */ --felimo-green-500: #2a6e4f; --felimo-green-100: #d1ede2; --felimo-red-500: #9b2226; --felimo-red-100: #f7d5d6; --felimo-blue-500: #1a4a7a; --felimo-blue-100: #d1dff0; /* ─── Semantic: Backgrounds ─────────────────────────────────── */ --bg-base: var(--felimo-white); --bg-subtle: var(--felimo-bone); --bg-muted: var(--felimo-linen); --bg-dark: var(--felimo-void); --bg-dark-raised: var(--felimo-charcoal); /* ─── Semantic: Surfaces ────────────────────────────────────── */ --surface-1: #ffffff; --surface-2: var(--felimo-white); --surface-3: var(--felimo-bone); --surface-inverse: var(--felimo-charcoal); /* ─── Semantic: Borders ─────────────────────────────────────── */ --border-subtle: var(--felimo-linen); --border-default: var(--felimo-mist); --border-strong: var(--felimo-silver); --border-inverse: rgba(255, 255, 255, 0.12); /* ─── Semantic: Text ────────────────────────────────────────── */ --text-primary: var(--felimo-void); --text-secondary: var(--felimo-smoke); --text-tertiary: var(--felimo-ash); --text-disabled: var(--felimo-silver); --text-inverse: var(--felimo-white); --text-inverse-secondary: rgba(253, 252, 250, 0.70); --text-accent: var(--felimo-amber-600); --text-on-accent: var(--felimo-white); /* ─── Semantic: Accent ──────────────────────────────────────── */ --accent: var(--felimo-amber-500); --accent-hover: var(--felimo-amber-600); --accent-press: var(--felimo-amber-700); --accent-subtle: var(--felimo-amber-50); --accent-muted: var(--felimo-amber-100); /* ─── Semantic: States ──────────────────────────────────────── */ --color-success: var(--felimo-green-500); --color-success-bg: var(--felimo-green-100); --color-error: var(--felimo-red-500); --color-error-bg: var(--felimo-red-100); --color-info: var(--felimo-blue-500); --color-info-bg: var(--felimo-blue-100); } /* Felimo — Typography Tokens * Google Fonts substitutes flagged below — replace with licensed files when available. * SUBSTITUTION: "Cormorant Garamond" used in place of a custom display serif. * SUBSTITUTION: "DM Sans" used in place of a custom geometric sans. */ :root { /* ─── Font Families ─────────────────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; /* ─── Font Weights ──────────────────────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── Font Sizes ────────────────────────────────────────────── */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ --text-8xl: 6rem; /* 96px */ --text-display: 5rem; /* 80px */ --text-hero: 7rem; /* 112px */ /* ─── Line Heights ──────────────────────────────────────────── */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* ─── Letter Spacing ────────────────────────────────────────── */ --tracking-tightest: -0.04em; --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.12em; --tracking-caps: 0.08em; /* ─── Semantic Type Roles ───────────────────────────────────── */ /* Hero — large editorial display, Cormorant */ --type-hero-family: var(--font-display); --type-hero-size: var(--text-hero); --type-hero-weight: var(--weight-light); --type-hero-leading: var(--leading-tight); --type-hero-tracking: var(--tracking-tighter); /* Display — section headings, Cormorant */ --type-display-family: var(--font-display); --type-display-size: var(--text-display); --type-display-weight: var(--weight-regular); --type-display-leading: var(--leading-tight); --type-display-tracking: var(--tracking-tight); /* Title 1 — page title, Cormorant */ --type-title1-family: var(--font-display); --type-title1-size: var(--text-6xl); --type-title1-weight: var(--weight-medium); --type-title1-leading: var(--leading-tight); --type-title1-tracking: var(--tracking-tight); /* Title 2 — section heading, Cormorant */ --type-title2-family: var(--font-display); --type-title2-size: var(--text-4xl); --type-title2-weight: var(--weight-medium); --type-title2-leading: var(--leading-snug); --type-title2-tracking: var(--tracking-normal); /* Headline — DM Sans, strong */ --type-headline-family: var(--font-sans); --type-headline-size: var(--text-2xl); --type-headline-weight: var(--weight-semibold); --type-headline-leading: var(--leading-snug); --type-headline-tracking: var(--tracking-tight); /* Subheading — DM Sans, medium */ --type-subheading-family: var(--font-sans); --type-subheading-size: var(--text-lg); --type-subheading-weight: var(--weight-medium); --type-subheading-leading: var(--leading-normal); --type-subheading-tracking: var(--tracking-normal); /* Body — DM Sans, regular */ --type-body-family: var(--font-sans); --type-body-size: var(--text-base); --type-body-weight: var(--weight-regular); --type-body-leading: var(--leading-relaxed); --type-body-tracking: var(--tracking-normal); /* Body Small */ --type-body-sm-family: var(--font-sans); --type-body-sm-size: var(--text-sm); --type-body-sm-weight: var(--weight-regular); --type-body-sm-leading: var(--leading-normal); --type-body-sm-tracking: var(--tracking-normal); /* Label — DM Sans, medium, small */ --type-label-family: var(--font-sans); --type-label-size: var(--text-sm); --type-label-weight: var(--weight-medium); --type-label-leading: var(--leading-none); --type-label-tracking: var(--tracking-wide); /* Caption — DM Sans, small */ --type-caption-family: var(--font-sans); --type-caption-size: var(--text-xs); --type-caption-weight: var(--weight-regular); --type-caption-leading: var(--leading-normal); --type-caption-tracking: var(--tracking-wide); /* Overline — DM Sans, caps, spaced */ --type-overline-family: var(--font-sans); --type-overline-size: var(--text-xs); --type-overline-weight: var(--weight-semibold); --type-overline-leading: var(--leading-none); --type-overline-tracking: var(--tracking-widest); /* Code */ --type-mono-family: var(--font-mono); --type-mono-size: var(--text-sm); --type-mono-weight: var(--weight-regular); --type-mono-leading: var(--leading-relaxed); } /* Felimo — Spacing Tokens * 4px base grid. Semantic layout tokens for consistent page structure. */ :root { /* ─── Base Scale (4px grid) ─────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-56: 14rem; /* 224px */ --space-64: 16rem; /* 256px */ /* ─── Semantic Layout Tokens ────────────────────────────────── */ /* Page layout */ --layout-page-max: 1280px; --layout-page-max-wide: 1440px; --layout-page-px: var(--space-8); /* 32px side padding */ --layout-page-px-sm: var(--space-5); /* 20px on mobile */ --layout-section-gap: var(--space-32); /* between page sections */ --layout-section-gap-sm: var(--space-20); /* on mobile */ /* Component spacing */ --spacing-component-xs: var(--space-1); --spacing-component-sm: var(--space-2); --spacing-component-md: var(--space-4); --spacing-component-lg: var(--space-6); --spacing-component-xl: var(--space-10); /* Card padding */ --padding-card-sm: var(--space-4) var(--space-5); --padding-card-md: var(--space-6) var(--space-7); --padding-card-lg: var(--space-8) var(--space-10); /* Button padding */ --padding-btn-sm: var(--space-2) var(--space-4); --padding-btn-md: var(--space-3) var(--space-6); --padding-btn-lg: var(--space-4) var(--space-8); --padding-btn-xl: var(--space-5) var(--space-10); } /* Felimo — Shadow Tokens * Warm-tinted shadows keyed to the void base color. * Use sparingly — premium surfaces breathe, they don't float. */ :root { /* ─── Elevation Scale ───────────────────────────────────────── */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(14, 13, 11, 0.06); --shadow-sm: 0 1px 3px rgba(14, 13, 11, 0.08), 0 1px 2px rgba(14, 13, 11, 0.04); --shadow-md: 0 4px 12px rgba(14, 13, 11, 0.08), 0 2px 4px rgba(14, 13, 11, 0.05); --shadow-lg: 0 8px 24px rgba(14, 13, 11, 0.10), 0 3px 8px rgba(14, 13, 11, 0.06); --shadow-xl: 0 16px 48px rgba(14, 13, 11, 0.12), 0 6px 16px rgba(14, 13, 11, 0.07); --shadow-2xl: 0 32px 80px rgba(14, 13, 11, 0.16), 0 12px 28px rgba(14, 13, 11, 0.10); /* ─── Accent Glow (use on featured cards, accent elements) ──── */ --shadow-glow-amber: 0 0 0 1px rgba(196, 137, 58, 0.20), 0 8px 32px rgba(196, 137, 58, 0.18); --shadow-glow-amber-sm: 0 0 0 1px rgba(196, 137, 58, 0.14), 0 4px 16px rgba(196, 137, 58, 0.12); /* ─── Inner Shadows ─────────────────────────────────────────── */ --shadow-inner: inset 0 1px 3px rgba(14, 13, 11, 0.08); --shadow-inner-strong: inset 0 2px 6px rgba(14, 13, 11, 0.14); /* ─── Focus Ring ────────────────────────────────────────────── */ --shadow-focus: 0 0 0 3px rgba(196, 137, 58, 0.35); --shadow-focus-dark: 0 0 0 3px rgba(253, 252, 250, 0.35); } /* Felimo — Motion Tokens * Apple-inspired easing curves. Prefer --ease-out for entrances, * --ease-in for exits, --ease-spring for interactive feedback. */ :root { /* ─── Easing Curves ─────────────────────────────────────────── */ --ease-linear: linear; /* @kind other */ --ease-in: cubic-bezier(0.42, 0.00, 1.00, 1.00); /* @kind other */ --ease-out: cubic-bezier(0.00, 0.00, 0.38, 1.00); /* @kind other */ --ease-in-out: cubic-bezier(0.42, 0.00, 0.58, 1.00); /* @kind other */ --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */ /* Apple default */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00); /* @kind other */ /* playful bounce */ --ease-gentle: cubic-bezier(0.16, 1.00, 0.30, 1.00); /* @kind other */ /* soft overshoot */ --ease-sharp: cubic-bezier(0.60, 0.00, 0.40, 1.00); /* @kind other */ /* crisp emphasis */ /* ─── Durations ─────────────────────────────────────────────── */ --duration-instant: 50ms; /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-normal: 200ms; /* @kind other */ --duration-moderate: 320ms; /* @kind other */ --duration-slow: 500ms; /* @kind other */ --duration-slower: 700ms; /* @kind other */ --duration-sluggish: 1000ms; /* @kind other */ /* ─── Semantic Motion Roles ─────────────────────────────────── */ /* Micro-interactions (hover states, icon rotations) */ --transition-micro: var(--duration-fast) var(--ease-smooth); /* @kind other */ /* UI state changes (color, opacity, border) */ --transition-base: var(--duration-normal) var(--ease-smooth); /* @kind other */ /* Element entrance (fade + slide in) */ --transition-enter: var(--duration-moderate) var(--ease-out); /* @kind other */ /* Element exit */ --transition-exit: var(--duration-normal) var(--ease-in); /* @kind other */ /* Layout shifts (expand/collapse, drawers) */ --transition-layout: var(--duration-slow) var(--ease-gentle); /* @kind other */ /* Page-level transitions */ --transition-page: var(--duration-slower) var(--ease-smooth); /* @kind other */ } /* Felimo — Radii & Border Tokens */ :root { /* ─── Radius Scale ──────────────────────────────────────────── */ --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 28px; --radius-4xl: 36px; --radius-full: 9999px; /* ─── Semantic Radius Roles ─────────────────────────────────── */ --radius-btn: var(--radius-full); /* Buttons: pill shape */ --radius-badge: var(--radius-full); /* Badges / tags */ --radius-card: var(--radius-xl); /* Product cards */ --radius-card-lg: var(--radius-3xl); /* Large feature cards */ --radius-input: var(--radius-md); /* Form inputs */ --radius-modal: var(--radius-2xl); /* Dialogs / sheets */ --radius-tooltip: var(--radius-sm); /* Tooltips */ --radius-image: var(--radius-lg); /* Inline images */ --radius-thumbnail: var(--radius-md); /* Product thumbnails */ /* ─── Border Widths ────────────────────────────────────────── `--border-width-*`: het oude `--border-default` (1px) overschaduwde de gelijknamige KLEUR-token hierboven (--felimo-mist), waardoor elke `border: 1px solid var(--border-default)` ongeldig werd en wegviel. */ --border-width-thin: 1px; --border-width-default: 1px; --border-width-medium: 1.5px; --border-width-thick: 2px; }