/* Design tokens — Ahifi Design System */ /* Font Inter Tight se načítá v (preconnect + link) – rychlejší než @import */ /* Ahifi colour tokens (from tokens.json) */ :root { --ink: #000000; --ink-hover: #332742; --link: #140626; --muted: #84868d; --muted-hover: #777980; --muted-strong: #6b6d73; --surface: #ffffff; --surface-soft: #f6f6f8; --line: #d6d8de; --line-soft: #c6c8ce; --hairline: rgba(198,200,206,0.5); --success: #3cc382; --success-hover: #36b075; --success-soft: rgba(60,195,130,0.1); --info: #266eff; --info-soft: rgba(38,110,255,0.1); --warning: #ed7d3a; --warning-soft: rgba(237,125,58,0.1); --danger: #ec2d55; --danger-hover: #ea1642; --danger-soft: rgba(236,45,85,0.1); --error: #dc2b1c; --error-soft: rgba(220,43,28,0.1); --mint: #6ae5b5; --turquoise: #39e9f0; --turquoise-hover: #21e6ee; --purple: #6b7fd7; --scrim: rgba(0,0,0,0.78); --on-dark: #ffffff; /* semantic aliases */ --text-body: var(--ink); --text-secondary: var(--muted); --text-link: var(--link); --text-on-dark: var(--on-dark); --surface-page: var(--surface); --surface-card: var(--surface-soft); --surface-hover: var(--line); --border-divider: var(--hairline); --action-primary: var(--ink); --action-primary-hover: var(--ink-hover); } /* Ahifi typography — Inter Tight 400/500/600 (Google Fonts, loaded in fonts.css) */ :root { --font-sans: "Inter Tight", sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --size-h1: 44px; --size-h1-mobile: 32px; --size-h2: 30px; --size-h2-mobile: 24px; --size-h3: 24px; --size-h3-mobile: 20px; --size-h4: 20px; --size-h4-mobile: 18px; --size-perex: 20px; --size-body: 16px; --size-product-title: 18px; --size-price: 20px; --size-label: 14px; --size-caption: 12px; --leading-heading: 1.2; --leading-body: 1.5; } .h1 { font-family: var(--font-sans); font-size: 44px; line-height: 1.2; font-weight: 600; } .h2 { font-family: var(--font-sans); font-size: 30px; line-height: 1.2; font-weight: 600; } .h3 { font-family: var(--font-sans); font-size: 24px; line-height: 1.2; font-weight: 600; } .h4 { font-family: var(--font-sans); font-size: 20px; line-height: 1.2; font-weight: 600; } .nav-1 { font-family: var(--font-sans); font-size: 24px; line-height: 1.2; font-weight: 600; } .perex { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 500; } .body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; } .product-title { font-family: var(--font-sans); font-size: 18px; line-height: 20px; font-weight: 600; } .price { font-family: var(--font-sans); font-size: 20px; line-height: 1; font-weight: 600; } .button { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 600; } .label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; } .caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; } .overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; } @media (max-width: 1023px) { .h1 { font-size: 32px; } .h2 { font-size: 24px; } .h3 { font-size: 20px; } .h4 { font-size: 18px; } } /* Ahifi spacing — the site's rem steps */ :root { --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-4-5: 18px; --space-5: 20px; --space-6: 24px; --space-7-5: 30px; --space-10: 40px; --space-15: 60px; --space-20: 80px; } /* Ahifi corner radii + the only two shadows */ :root { --radius-s: 8px; --radius-m: 12px; --radius-l: 20px; --radius-product: 24px; --radius-xl: 30px; --radius-pill: 9999px; --shadow-sticky: 0 4px 4px rgba(0,0,0,0.1); --shadow-image-well: inset 0 0 100px rgba(230,230,230,0.25); } /* Ahifi containers + breakpoints (breakpoints are reference values; CSS vars can't be used in media queries) */ :root { --container-max: 1900px; --container-s: 1200px; --container-xs: 980px; --bp-s: 560px; --bp-m: 768px; --bp-t: 900px; --bp-l: 1024px; --bp-d: 1200px; --bp-w: 1280px; --bp-u: 1600px; --bp-x: 1900px; } /* Page base */ body { font-family: var(--font-sans); color: var(--ink); background: var(--surface); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; margin: 0; } a { color: var(--link); text-decoration: underline; } a:hover { color: var(--link); text-decoration: none; }