/* ============================================================= tokens.css — Design tokens for jmfc.pl Single source of truth for all colors, type, spacing, shadows. Link this FIRST in before any other stylesheet. ============================================================= */ :root { /* ── Brand Colors ──────────────────────────────────────── */ --color-navy: #1B263B; /* primary dark background */ --color-navy-deep: #0d1f3c; /* deeper variant (hero bg) */ --color-navy-mid: #1a202c; /* nav bar + panel bg */ --color-navy-card: #162d52; /* dropdown / card bg */ --color-teal: #26A69A; /* primary accent */ --color-teal-dark: #1d8a7f; /* hover state */ --color-blue: #1a56db; /* CTA button */ --color-blue-dark: #1648c0; /* CTA button hover */ --color-blue-light: #3b82f6; /* active / highlight state */ /* ── Neutral ───────────────────────────────────────────── */ --color-white: #ffffff; --color-offwhite: #f8fafc; --color-surface: #f1f5f9; --color-border: rgba(255,255,255,.08); --color-text: rgba(255,255,255,.85); --color-text-muted: rgba(255,255,255,.6); --color-text-subtle: rgba(255,255,255,.4); /* ── Typography ────────────────────────────────────────── */ --font-sans: "DM Sans", system-ui, -apple-system, sans-serif; --font-serif: "Playfair Display", Georgia, serif; --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 */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; /* ── Spacing ───────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Layout ────────────────────────────────────────────── */ --container-max: 1200px; --container-pad: var(--space-6); /* horizontal page padding */ --nav-height: 68px; /* ── Border Radius ─────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ── Shadows ───────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0,0,0,.15); --shadow-md: 0 4px 20px rgba(0,0,0,.25); --shadow-lg: 0 8px 40px rgba(0,0,0,.35); --shadow-nav: 0 2px 20px rgba(0,0,0,.3); /* ── Transitions ───────────────────────────────────────── */ --transition-fast: .15s ease; --transition-base: .25s ease; --transition-slow: .38s ease; --transition-bezier: .3s cubic-bezier(.4,0,.2,1); /* matches service.css --transition */ /* ── Z-index scale ─────────────────────────────────────── */ --z-dropdown: 100; --z-nav: 9000; --z-panel: 9500; } /* ============================================================= Legacy aliases — map short names used throughout service.css, inline