/* ========================================================================== Handlowa 7, design tokens v1.0 (22 July 2026) Source of truth: docs/design/design-spec.md Light theme only in v1. A future dark theme lands as a [data-theme="dark"] override block; components read tokens, never hexes. No raw colour, size, or shadow values belong in component CSS. ========================================================================== */ :root { /* ---- Colour: primitives (spec section 3.1) ---------------------------- */ --h7-ink: #232B33; /* deep slate ink: headings, body, icons */ --h7-text: var(--h7-ink); --h7-text-muted: #5C6470; /* secondary text, AA on white and canvas */ --h7-canvas: #F5F4F1; /* warm-grey paper page canvas */ --h7-surface: #FFFFFF; /* cards, rows, inputs, sheets */ --h7-surface-tint: #FAFAF7; /* hover, quiet zebra, read-only fills */ --h7-line: #D9D8D3; /* decorative hairline */ --h7-line-strong: #8A9099; /* interactive boundaries, 3:1 on white */ --h7-primary: #3E5C76; /* slate blue, the single accent */ --h7-primary-deep: #32485C; /* hover and pressed primary */ --h7-primary-wash: rgba(62, 92, 118, 0.08); /* selected-state fill */ --h7-success: #4F7A5B; /* muted green, text-safe on white */ --h7-success-wash: rgba(79, 122, 91, 0.10); --h7-warning: #8A6A2B; /* deep ochre, text-safe on white */ --h7-warning-mark: #B08A3E; /* ochre marks and stripes, non-text only */ --h7-warning-wash: rgba(176, 138, 62, 0.12); --h7-error: #A5473E; /* muted brick, blocking states only */ --h7-error-wash: rgba(165, 71, 62, 0.10); --h7-scrim: rgba(35, 43, 51, 0.40); /* modal and sheet scrim */ --h7-print-ink: #111111; /* print tier ink, see print block below */ /* ---- Typography (spec section 4) -------------------------------------- */ --h7-font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --h7-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace; /* Apply on every monetary, meter, and quantity value. */ --h7-font-numeric: 'tnum' 1; /* use: font-feature-settings: var(--h7-font-numeric); */ --h7-text-display: 28px; --h7-lh-display: 1.2; /* weight 600 */ --h7-text-h1: 22px; --h7-lh-h1: 1.25; /* weight 600 */ --h7-text-h2: 17px; --h7-lh-h2: 1.3; /* weight 600 */ --h7-text-label: 12px; --h7-lh-label: 1.35; /* 600, uppercase */ --h7-ls-label: 0.06em; /* label tracking */ --h7-text-body: 14px; --h7-lh-body: 1.5; /* desktop base */ --h7-text-body-lg: 16px; --h7-lh-body-lg: 1.5; /* mobile base + ALL inputs */ --h7-text-caption: 12px; --h7-lh-caption: 1.4; --h7-text-num-lg: 22px; --h7-lh-num: 1.2; /* KPI values, tabular */ --h7-text-num-xl: 28px; /* mobile meter input */ --h7-weight-body: 400; --h7-weight-medium: 500; /* buttons, emphasised cells */ --h7-weight-heading: 600; --h7-weight-print: 700; /* print document titles only */ /* ---- Spacing, 4px base (spec section 5) -------------------------------- */ --h7-space-1: 4px; --h7-space-2: 8px; --h7-space-3: 12px; --h7-space-4: 16px; --h7-space-5: 20px; --h7-space-6: 24px; --h7-space-8: 32px; --h7-space-10: 40px; --h7-space-12: 48px; --h7-space-16: 64px; /* ---- Radii ------------------------------------------------------------- */ --h7-radius-sm: 6px; /* buttons, inputs, chips */ --h7-radius-md: 10px; /* cards, table rows, banners */ --h7-radius-lg: 14px; /* modals, bottom sheets, wizard panel */ --h7-radius-pill: 999px; /* status chips, stepper dots */ /* ---- Elevation: ink-alpha shadows plus white lit edges (section 6) ---- Ground does not float. One rung of lift on hover, never more. */ --h7-elev-ground: none; --h7-elev-raised: 0 1px 1px rgba(35, 43, 51, 0.05), 0 6px 14px -10px rgba(35, 43, 51, 0.16); --h7-elev-floating: 0 1px 1px rgba(35, 43, 51, 0.05), 0 10px 24px -14px rgba(35, 43, 51, 0.18), 0 30px 56px -40px rgba(35, 43, 51, 0.24); --h7-elev-lifted: 0 1px 1px rgba(35, 43, 51, 0.06), 0 16px 34px -16px rgba(35, 43, 51, 0.22), 0 44px 76px -44px rgba(35, 43, 51, 0.30); --h7-edge-lit: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.40); /* ---- Frosted glass, floating surfaces only ---------------------------- Pair with a backdrop-filter; fall back to --h7-surface when backdrop-filter is unsupported. */ --h7-glass-card: rgba(255, 255, 255, 0.72); --h7-glass-row: rgba(255, 255, 255, 0.80); --h7-glass-blur: blur(22px) saturate(1.15); --h7-glass-blur-row: blur(16px) saturate(1.1); /* ---- Borders ----------------------------------------------------------- */ --h7-border-hairline: 1px solid var(--h7-line); --h7-border-input: 1px solid var(--h7-line-strong); /* ---- Focus (section 6): every interactive element, :focus-visible ----- */ --h7-focus-ring: 0 0 0 2px var(--h7-canvas), 0 0 0 4px var(--h7-primary); /* ---- Motion (section 6) ------------------------------------------------ */ --h7-motion: 300ms ease; /* hover lifts, state fills, sheets */ --h7-motion-fast: 120ms ease; /* micro feedback: chip ticks, input focus */ /* ---- Layout metrics (section 5, 7.1) ----------------------------------- */ --h7-content-max: 1120px; --h7-sidebar-w: 232px; --h7-topbar-h: 56px; --h7-tabbar-h: 64px; /* add env(safe-area-inset-bottom) at use site */ --h7-touch: 44px; /* minimum interactive target */ --h7-touch-lg: 56px; /* mobile meter-entry controls */ --h7-tap-gap: 8px; /* minimum gap between adjacent targets */ /* ---- Logo slot (spec section 2) ---------------------------------------- */ --h7-logo-h-app: 28px; /* max logo height in the app top bar / sidebar */ } /* -------------------------------------------------------------------------- Mobile (< 1024px): tab-bar layout; body size steps up to 16px. Inputs are 16px on every viewport already (iOS zoom guard). -------------------------------------------------------------------------- */ @media (max-width: 1023px) { :root { --h7-text-body: 16px; --h7-lh-body: 1.5; } } /* -------------------------------------------------------------------------- Reduced motion: transforms and lifts off, resting depth stays. Components must also drop translateY hover shifts under this query. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --h7-motion: 0ms; --h7-motion-fast: 0ms; } } /* -------------------------------------------------------------------------- Print tier (spec section 9): flat, black-on-white, conservative. No shadows, no glass, no washes, no slate blue on paper. -------------------------------------------------------------------------- */ @media print { :root { --h7-text: var(--h7-print-ink); --h7-ink: var(--h7-print-ink); --h7-text-muted: #444444; --h7-canvas: #FFFFFF; --h7-surface: #FFFFFF; --h7-surface-tint: #F2F2F2; /* table-header fill, the one print grey */ --h7-line: #999999; /* 0.5pt hairlines */ --h7-line-strong: var(--h7-print-ink); --h7-primary: var(--h7-print-ink); --h7-primary-deep: var(--h7-print-ink); --h7-primary-wash: transparent; --h7-success-wash: transparent; --h7-warning-wash: transparent; --h7-error-wash: transparent; --h7-elev-raised: none; --h7-elev-floating: none; --h7-elev-lifted: none; --h7-edge-lit: none; --h7-glass-card: #FFFFFF; --h7-glass-row: #FFFFFF; --h7-glass-blur: none; --h7-glass-blur-row: none; --h7-motion: 0ms; --h7-motion-fast: 0ms; } }