/* ============================================================ EverettYoung Design System — core tokens + typography ------------------------------------------------------------ Source of truth. Kept in lockstep with src/styles/tokens.css from the evy-portal codebase. Also defines semantic type helpers (h1, h2, body, code, kpi …) on top of the tokens. ============================================================ */ /* Webfonts ----------------------------------------------------- Liter — display / wordmark family (the brand). Loaded locally from fonts/Liter-Regular.ttf. Only Regular (400) ships with the brand — do NOT synthesize bold via font-weight: 700 in browsers that fake it. Use Inter for bold weights. Inter — body + UI workhorse. Google Fonts (weights 400–700). Cousine — monospace for code. Google Fonts (400, 700). -------------------------------------------------------------- */ @font-face { font-family: 'Liter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Liter-Regular.ttf') format('truetype'); } /* Inter + Cousine are linked from each HTML as with a preconnect to fonts.gstatic.com — see index.html, articles.html, article.html. Keeping those imports out of this file avoids a serialized CSS → CSS → font request chain that blocks first paint on cold cache. */ :root { /* === Font stacks =========================================== */ --font-display: 'Liter', 'Iowan Old Style', 'Palatino', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Cousine', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* === Brand colors (v2.0) ================================== */ --color-brand-primary: #587553; /* Reseda — solid CTAs, nav active, focus rings */ --color-brand-primary-hover: #4C6647; --color-brand-primary-active: #405638; --color-brand-primary-light: rgba(88, 117, 83, 0.10); --color-brand-primary-soft: #A2C799; /* Celadon — success fills, confirmation tags */ --color-brand-primary-soft-light: rgba(162, 199, 153, 0.12); --color-brand-secondary: #8484E6; /* Tropical indigo — secondary CTAs, links, info */ --color-brand-secondary-hover: #6F6FDA; --color-brand-secondary-active: #5A5ACC; --color-brand-secondary-light: rgba(132, 132, 230, 0.12); /* === Semantic (aliased to brand by default) =============== */ --color-semantic-success: var(--color-brand-primary-soft); --color-semantic-success-bg: var(--color-brand-primary-soft-light); --color-semantic-info: var(--color-brand-secondary); --color-semantic-info-bg: var(--color-brand-secondary-light); --color-semantic-warning: #E6C76A; --color-semantic-warning-bg: rgba(230, 199, 106, 0.12); --color-semantic-danger: #E07070; --color-semantic-danger-bg: rgba(224, 112, 112, 0.10); /* === Surface + neutral + text ============================= */ --color-surface-default: #FFFFFF; --color-surface-alt: #F8F9FA; --color-surface-body: #F3F4F8; --color-neutral-100: #F0F1F5; --color-neutral-200: #E2E4ED; --color-neutral-300: #C8CBDA; --color-neutral-400: #B5BAD0; --color-neutral-500: #9297A8; --color-neutral-600: #7B8196; --color-text-primary: #1E222B; --color-text-secondary: #9297A8; --color-bg-dark: #1E222B; /* chrome (sidebar, footers) */ --color-bg-dark-hover: #272B35; /* === Typography scale — base 14px, ratio 1.25 ============= */ --size-text-3xl: 44px; /* hero number, rarely */ --size-text-2xl: 35px; /* KPI values, large metrics */ --size-text-xl: 28px; /* section headings */ --size-text-lg: 22px; /* page titles, topbar */ --size-text-md: 18px; /* card titles */ --size-text-base: 14px; /* body, nav, table cells */ --size-text-xs: 11px; /* captions, labels, helpers */ /* Liter only ships Regular (400). Bold headlines use Inter. */ --weight-text-3xl: 400; /* Liter regular — display hero */ --weight-text-2xl: 700; /* Inter bold — KPI numbers */ --weight-text-xl: 400; /* Liter regular — section headings */ --weight-text-lg: 600; /* Inter semibold — page titles */ --weight-text-md: 600; /* Inter semibold — card titles */ --weight-text-base: 400; --weight-text-xs: 500; /* === Spacing — 4px base, 9 tokens ========================= */ --size-space-1: 4px; --size-space-2: 8px; --size-space-3: 12px; --size-space-4: 16px; --size-space-5: 20px; --size-space-6: 24px; --size-space-8: 32px; --size-space-10: 40px; --size-space-12: 48px; --size-space-16: 64px; --size-space-20: 80px; /* === Radius =============================================== */ --size-radius-sm: 4px; --size-radius-default: 8px; --size-radius-lg: 12px; --size-radius-xl: 16px; --size-radius-full: 9999px; /* === Shadows (subtle — shadows are the "depth system", not borders) ======================================= */ --shadow-sm: 0 1px 2px rgba(30, 34, 43, 0.06); --shadow-default: 0 1px 3px rgba(30, 34, 43, 0.10); --shadow-md: 0 4px 12px rgba(30, 34, 43, 0.08); --shadow-lg: 0 8px 24px rgba(30, 34, 43, 0.12); /* === Motion ================================================ */ --duration-fast: 80ms; --duration-normal: 150ms; --duration-slow: 250ms; --duration-slower: 400ms; --ease-default: ease; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* === Layout chrome ========================================= */ --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; } /* ============================================================ Short aliases (matching evy-portal shorthand: bg-ey-primary, text-ey-dark, etc). Keep both sets — long names are the source of truth, short names are convenient in components. ============================================================ */ :root { --ey-primary: var(--color-brand-primary); --ey-primary-hover: var(--color-brand-primary-hover); --ey-primary-active: var(--color-brand-primary-active); --ey-primary-light: var(--color-brand-primary-light); --ey-primary-soft: var(--color-brand-primary-soft); --ey-secondary: var(--color-brand-secondary); --ey-secondary-hover: var(--color-brand-secondary-hover); --ey-secondary-active: var(--color-brand-secondary-active); --ey-secondary-light: var(--color-brand-secondary-light); --ey-dark: var(--color-text-primary); --ey-chrome: var(--color-bg-dark); --ey-surface: var(--color-surface-default); --ey-surface-alt: var(--color-surface-alt); --ey-surface-body: var(--color-surface-body); --ey-neutral-100: var(--color-neutral-100); --ey-neutral-200: var(--color-neutral-200); --ey-neutral-300: var(--color-neutral-300); --ey-neutral-400: var(--color-neutral-400); --ey-neutral-500: var(--color-neutral-500); --ey-success: var(--color-semantic-success); --ey-warning: var(--color-semantic-warning); --ey-danger: var(--color-semantic-danger); --ey-info: var(--color-semantic-info); } /* ============================================================ Semantic type helpers — drop-in classes. Use on plain elements (h1.ey-h1, p.ey-body …) or via the `.ey` scope. ============================================================ */ .ey, .ey-root { font-family: var(--font-sans); font-size: var(--size-text-base); line-height: 1.6; color: var(--color-text-primary); background: var(--color-surface-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display / h1 — Liter, section hero ---------------------- */ .ey-display, .ey h1.ey-display { font-family: var(--font-display); font-size: var(--size-text-3xl); font-weight: 400; /* Liter Regular (only weight shipped) */ line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text-primary); } /* h1 — section heading. Liter Regular; use Inter 700 for bolder headings. */ .ey-h1 { font-family: var(--font-display); font-size: var(--size-text-xl); /* 28 */ font-weight: 400; /* Liter Regular */ line-height: 1.14; /* 32px on 28 */ letter-spacing: -0.01em; color: var(--color-text-primary); } /* h1 alt — Inter Bold, for higher-emphasis section heads */ .ey-h1-bold { font-family: var(--font-sans); font-size: var(--size-text-xl); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; color: var(--color-text-primary); } /* h2 — page title, topbar */ .ey-h2 { font-family: var(--font-sans); font-size: var(--size-text-lg); /* 22 */ font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; color: var(--color-text-primary); } /* h3 — card title, subhead */ .ey-h3 { font-family: var(--font-sans); font-size: var(--size-text-md); /* 18 */ font-weight: 600; line-height: 1.33; color: var(--color-text-primary); } /* KPI / metric value — big number, tabular ---------------- */ .ey-kpi { font-family: var(--font-sans); font-size: var(--size-text-2xl); /* 35 */ font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-text-primary); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Body / paragraph */ .ey-body { font-family: var(--font-sans); font-size: var(--size-text-base); /* 14 */ font-weight: 400; line-height: 1.6; /* 22.4 */ color: var(--color-text-primary); } /* Secondary / muted body */ .ey-muted { font-family: var(--font-sans); font-size: var(--size-text-base); font-weight: 400; line-height: 1.6; color: var(--color-text-secondary); } /* Caption / micro label */ .ey-caption { font-family: var(--font-sans); font-size: var(--size-text-xs); /* 11 */ font-weight: 500; line-height: 1.6; color: var(--color-text-secondary); } /* Section eyebrow / all-caps label (very common in the kit) */ .ey-eyebrow { font-family: var(--font-sans); font-size: var(--size-text-xs); font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); } /* Code / mono */ .ey-code { font-family: var(--font-mono); font-size: var(--size-text-xs); font-weight: 400; color: var(--color-text-primary); background: var(--color-neutral-100); padding: 2px 6px; border-radius: var(--size-radius-sm); } /* Utility tabular numerals — opt into anywhere numbers line up */ .ey-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }