/* Inlined from tokens/colors.css, tokens/typography.css, tokens/spacing.css — kept as separate source files for the design system, merged here to avoid a render-blocking @import chain. Re-sync manually if a token file changes. */ /* Colors — Paleta A „Plum & Porcelan" (source: pmu/theme.ts, PMU Brand Sheet v1) */ :root { /* Plum — primary scale */ --plum-50: #F4E3E9; --plum-100: #E8C7D3; --plum-200: #D49CB0; --plum-400: #A45A76; --plum-600: #6B2D42; /* primary */ --plum-800: #4B1528; --plum-900: #360E1C; /* Rose — accent (tertiary) */ --rose-100: #F7DDE2; --rose-400: #C98A94; --rose-800: #4B1528; /* Taupe — secondary */ --taupe-100: #F4EFEA; --taupe-400: #8A7368; --taupe-800: #3E332C; /* Neutrals */ --bg: #FAF7F5; /* porcelan pozadina */ --surface: #FFFFFF; --surface-var: #F0E7E4; --outline: #9C8A8E; --outline-var: #E3D6D9; --text: #2B2126; --text-muted: #6E5F62; /* Semantic */ --success: #3E7C5B; --success-bg: #DCEEE4; --success-text: #173D2B; --warning: #C9862D; --warning-bg: #F8E9D3; --warning-text: #5C3A0E; --error: #B3403E; --error-bg: #F9DEDC; --error-text: #5E1414; /* Semantic aliases */ --color-primary: var(--plum-600); --color-on-primary: #FFFFFF; --color-primary-container: var(--plum-50); --color-on-primary-container: var(--plum-800); --color-secondary: var(--taupe-400); --color-secondary-container: var(--taupe-100); --color-on-secondary-container: var(--taupe-800); --color-accent: var(--rose-400); --surface-card: var(--surface); --surface-page: var(--bg); --text-body: var(--text); --text-secondary: var(--text-muted); --border-default: var(--outline-var); --border-strong: var(--outline); /* Elevation tints (MD3, surface + plum tint) */ --elev-1: #F9F2F3; --elev-2: #F6ECEE; --elev-3: #F3E5E9; /* Misc */ --backdrop: rgba(43, 33, 38, 0.4); --disabled-surface: rgba(43, 33, 38, 0.12); --disabled-text: rgba(43, 33, 38, 0.38); /* Dark theme reference values (dark bg per brand sheet) */ --dark-bg: #1D181A; --dark-surface: #241E20; --dark-primary: #EFB2C4; } /* Typography — Fraunces (brand/naslovi) + Inter (UI), both from Google Fonts (linked directly in , see index.html) */ :root { --font-display: 'Fraunces', Georgia, serif; /* naslovi, brand momenti — SemiBold 600 */ --font-ui: 'Inter', -apple-system, sans-serif; /* sve ostalo — 400/500/600 */ /* Scale (from theme.ts MD3 config) */ --type-display-lg: 600 40px/48px var(--font-display); --type-display-md: 600 32px/40px var(--font-display); --type-display-sm: 600 28px/36px var(--font-display); --type-headline-lg: 600 26px/34px var(--font-display); --type-headline-md: 600 22px/30px var(--font-display); --type-headline-sm: 600 20px/28px var(--font-ui); --type-title-lg: 600 18px/26px var(--font-ui); --type-title-md: 500 16px/24px var(--font-ui); --type-title-sm: 500 14px/20px var(--font-ui); --type-body-lg: 400 16px/24px var(--font-ui); --type-body-md: 400 14px/21px var(--font-ui); --type-body-sm: 400 13px/19px var(--font-ui); --type-label-lg: 500 14px/20px var(--font-ui); --type-label-md: 500 12px/16px var(--font-ui); --type-label-sm: 500 11px/16px var(--font-ui); /* Letter-spacing */ --tracking-body: 0.15px; --tracking-label: 0.3px; --tracking-wordmark: 0.1em; /* wordmark: Fraunces Medium 500, sentence case */ --tracking-tagline: 0.28em; /* (legacy) uppercase tagline tracking */ } /* Spacing, radii, shadows (derived from design/mockups.html) */ :root { /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 12px; --space-5: 14px; --space-6: 18px; --space-7: 24px; --space-8: 32px; /* Radii */ --radius-sm: 4px; /* checkbox */ --radius-md: 8px; /* inputs, inner blocks */ --radius-lg: 10px; /* buttons, banners */ --radius-xl: 12px; /* cards */ --radius-2xl: 14px; /* panels */ --radius-phone: 28px; --radius-pill: 999px; /* chips */ /* Shadows — very restrained, one soft level */ --shadow-card: 0 1px 3px rgba(43, 33, 38, 0.06); /* Accent bars (timeline/calendar cards) */ --accent-bar-width: 3px; /* Hit targets */ --touch-target: 44px; }