/* ============================================================= DESIGN SYSTEM — CSS CUSTOM PROPERTIES Earthy base palette + Pacific Blue accent Last updated: 2026-05-22 ============================================================= */ :root { /* ----------------------------------------------------------- COLOR — BASE (backgrounds & surfaces) Rule: 90% of the screen lives here. Layer bg-secondary on top of bg-primary for cards, sidebars, and inset panels. ----------------------------------------------------------- */ --bg-primary: #FDFBF7; /* Soft Parchment — dominant canvas */ --bg-secondary: #F5F2EA; /* Dune Sand — cards, sidebars, insets */ --border-light: #E6E1D3; /* Pebble — dividers, subtle outlines */ /* ----------------------------------------------------------- COLOR — TEXT Rule: Use text-main for everything important. Use text-muted for supporting info only (dates, labels, footers). ----------------------------------------------------------- */ --text-main: #3E2F28; /* Espresso — headers, body, primary labels */ --text-muted: #8D837D; /* 3-Day Slate — metadata, captions, helpers */ /* ----------------------------------------------------------- COLOR — BRAND (the action layer) Rule: Pacific Blue is the only saturated color on the screen. Use it sparingly so it always signals "do something." --brand-blue → default button, active links, icons --brand-hover → button hover (darker = press-down feel) --brand-active → button pressed / keyboard focus ring source --brand-light → hover tint on ghost buttons, focus backgrounds ----------------------------------------------------------- */ --brand-blue: #0077B6; /* Pacific Blue — primary CTA */ --brand-hover: #005F8E; /* Deepened ~15% — hover state on buttons */ --brand-active: #023E8A; /* Deep Navy — pressed state, focus rings */ --brand-light: #ADE8F4; /* Sky Light — ghost button hover bg only */ /* ----------------------------------------------------------- COLOR — STATUS Rule: One color per outcome. Don't use brand-blue here. ----------------------------------------------------------- */ --status-success: #606C38; /* Sage — "Saved," "Sent," "Done" */ --status-warning: #BC6C25; /* Golden Hour — caution, alerts, "Review" */ --status-error: #9B2226; /* Deep Brick — destructive, failures */ /* ----------------------------------------------------------- TYPOGRAPHY — SCALE Base: 16px (1rem). Major third scale (×1.25). Line heights: tight for headings, relaxed for body. ----------------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Lora', Georgia, serif; /* Optional — editorial/pull quotes */ --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ --leading-tight: 1.2; /* Headings */ --leading-snug: 1.4; /* Subheadings, UI labels */ --leading-body: 1.65; /* Body copy, long-form text */ --leading-loose: 1.9; /* Dense data tables, captions */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ----------------------------------------------------------- SPACING — 4px base grid Rule: Every margin, padding, and gap is a multiple of 4px. Use --space-4 as your default unit. --space-8 for sections. ----------------------------------------------------------- */ --space-1: 0.25rem; /* 4px — icon padding, tight badges */ --space-2: 0.5rem; /* 8px — inline gaps, small insets */ --space-3: 0.75rem; /* 12px — input padding (vertical) */ --space-4: 1rem; /* 16px — default unit, card padding */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px — between grouped elements */ --space-8: 2rem; /* 32px — section breathing room */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px — major layout breaks */ --space-16: 4rem; /* 64px — hero/page-level whitespace */ --space-24: 6rem; /* 96px — full-section vertical gaps */ /* ----------------------------------------------------------- SHAPE — BORDER RADIUS Rule: Keep radius consistent per component type. Inputs and buttons share --radius-md for visual harmony. ----------------------------------------------------------- */ --radius-sm: 4px; /* Badges, code blocks, tight elements */ --radius-md: 8px; /* Inputs, buttons, small cards */ --radius-lg: 16px; /* Cards, modals, panels */ --radius-xl: 24px; /* Large feature cards, hero containers */ --radius-pill: 9999px; /* Tags, chips, pill buttons */ /* ----------------------------------------------------------- ELEVATION — SHADOWS Tinted with Espresso (#3E2F28) instead of neutral gray. This keeps shadows warm, cohesive with the earthy palette. Rule: Use sm for inputs/buttons, md for cards, lg for modals. ----------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(62, 47, 40, 0.07), 0 1px 2px rgba(62, 47, 40, 0.05); --shadow-md: 0 4px 12px rgba(62, 47, 40, 0.10), 0 2px 4px rgba(62, 47, 40, 0.06); --shadow-lg: 0 8px 24px rgba(62, 47, 40, 0.13), 0 4px 8px rgba(62, 47, 40, 0.08); --shadow-xl: 0 20px 48px rgba(62, 47, 40, 0.16), 0 8px 16px rgba(62, 47, 40, 0.10); /* ----------------------------------------------------------- MOTION — TRANSITIONS Rule: One variable per speed tier. Apply consistently. Fast: micro-interactions (hover color change). Base: most state changes (dropdowns, panels, modals). Slow: page-level or large layout shifts. ----------------------------------------------------------- */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* Material-style ease */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight overshoot */ --transition-fast: 120ms var(--ease-default); --transition-base: 220ms var(--ease-default); --transition-slow: 380ms var(--ease-default); /* ----------------------------------------------------------- FOCUS — ACCESSIBILITY Uses brand-active at 35% opacity for a soft, visible ring. Applied via box-shadow (not outline) so it respects border-radius. ----------------------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(2, 62, 138, 0.35); } /* ============================================================= FOCUS-VISIBLE — KEYBOARD ACCESSIBILITY Only shows on keyboard nav, not on mouse click. ============================================================= */ *:focus { outline: none; } *:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ============================================================= QUICK REFERENCE — COMPONENT RECIPES Copy these patterns; don't reinvent them. ============================================================= */ /* PRIMARY BUTTON ────────────── background: var(--brand-blue) color: white border-radius: var(--radius-md) padding: var(--space-3) var(--space-6) transition: background var(--transition-fast) :hover → background: var(--brand-hover) :active → background: var(--brand-active) GHOST / SECONDARY BUTTON ──────────────────────── background: transparent color: var(--brand-blue) border: 1.5px solid var(--border-light) border-radius: var(--radius-md) :hover → background: var(--brand-light), border-color: var(--brand-blue) CARD ──── background: var(--bg-secondary) border-radius: var(--radius-lg) box-shadow: var(--shadow-md) padding: var(--space-6) INPUT / TEXT FIELD ────────────────── background: var(--bg-primary) border: 1.5px solid var(--border-light) border-radius: var(--radius-md) padding: var(--space-3) var(--space-4) color: var(--text-main) font-size: var(--text-base) :focus-visible → box-shadow: var(--focus-ring), border-color: var(--brand-blue) STATUS BADGE ──────────── Success → background tint of --status-success at 12% opacity, text --status-success Warning → background tint of --status-warning at 12% opacity, text --status-warning Error → background tint of --status-error at 12% opacity, text --status-error */