/* ============================================================ demokrato — Colors & Type foundations A civic / democratic-participation platform. Non-partisan palette: Civic Violet + Civic Teal. Fonts: Fraunces (display serif) + Public Sans (UI/body). Load fonts via the Google Fonts link in your HTML : https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap ============================================================ */ :root { /* ---- Brand ---- */ --brand-primary: #5A39B4; /* Civic Violet — primary actions, marks, links */ --brand-primary-dark: #3D2475; /* Deep Plum — hover/pressed, headers on light */ --brand-primary-tint: #EBE5FA; /* Lilac — selected bg, subtle fills, badges */ --brand-accent: #0FA697; /* Civic Teal — secondary CTAs, data emphasis */ --brand-accent-dark: #0B7E73; /* Teal Dark — accent hover, chip text */ --brand-accent-tint: #DDF4F0; /* Mint Wash — accent backgrounds, info chips */ /* ---- Neutrals (warm-grey, faintly violet-tinted) ---- */ --ink: #1C1A22; /* Primary text */ --slate: #5C5A66; /* Secondary text, captions */ --muted: #8E8C99; /* Placeholder, disabled text */ --line: #E4E2EC; /* Borders, dividers */ --mist: #F6F5F9; /* App background, cards-on-page */ --surface: #FFFFFF; /* Cards, sheets, inputs */ /* ---- Semantic (functional UI only — kept muted, never page-dominating) ---- */ --success: #2E9E6B; /* Confirmations only */ --warning: #C98A1F; /* Cautions, toasts */ --error: #D64545; /* Validation errors only */ --info: #0FA697; /* Reuses Teal for info states */ /* ---- Fonts ---- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-ui: "Public Sans", "Inter", system-ui, -apple-system, sans-serif; /* ---- Type scale (16px base) ---- */ --fs-display: 3rem; /* 48px */ --fs-h1: 2.25rem; /* 36px */ --fs-h2: 1.75rem; /* 28px */ --fs-h3: 1.375rem; /* 22px */ --fs-body-l: 1.125rem; /* 18px */ --fs-body: 1rem; /* 16px */ --fs-caption: 0.875rem; /* 14px */ --fs-overline: 0.75rem; /* 12px */ --lh-tight: 1.1; --lh-snug: 1.2; --lh-normal: 1.6; /* ---- Spacing scale (8px rhythm) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ---- Radius ---- */ --r-control: 10px; /* inputs, buttons */ --r-card: 16px; /* cards */ --r-modal: 20px; /* sheets, modals */ --r-pill: 999px;/* pills, chips */ /* ---- Elevation (flat & honest) ---- */ --shadow-card: 0 1px 2px rgba(28,26,34,.06); --shadow-pop: 0 12px 32px rgba(61,36,117,.16); /* ---- Motion ---- */ --ease-out: cubic-bezier(.2,.6,.2,1); --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms; /* ---- Reading measure ---- */ --measure: 68ch; } /* ============================================================ Semantic type roles — apply these classes directly. ============================================================ */ .t-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--ink); } .t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -.01em; color: var(--ink); } .t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -.01em; color: var(--ink); } .t-h3 { font-family: var(--font-ui); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); } .t-body-l { font-family: var(--font-ui); font-size: var(--fs-body-l); font-weight: 400; line-height: var(--lh-normal); color: var(--ink); } .t-body { font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-normal); color: var(--ink); } .t-caption { font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 500; line-height: 1.4; color: var(--slate); } .t-overline { font-family: var(--font-ui); font-size: var(--fs-overline); font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary); } /* Tabular figures for vote counts, percentages, dates */ .t-num { font-variant-numeric: tabular-nums; }