/*
* Tiploy Design System — Colors & Typography
* Source: apps/frontend/src/styles.css + brand assets
* Font note: "Aptos" / "Aptos Display" are Microsoft 365 fonts.
* Substitute: Plus Jakarta Sans (Google Fonts) at similar weights.
* Load via: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap
*/
/* ─────────────────────────────────────────
BASE COLORS
───────────────────────────────────────── */
:root {
/* Backgrounds */
--color-bg: #f4f5f7; /* page background */
--color-bg-deep: #eceff2; /* gradient end / secondary bg */
--color-card: #ffffff; /* card / panel surface */
--color-card-subtle: #f9fafb; /* inset / hint surface */
--color-card-hover: #fbfcfd; /* hovered card / micro-pill */
/* Foregrounds */
--color-ink: #20242a; /* primary text */
--color-muted: #5b6470; /* secondary / label text */
/* Borders */
--color-line: #d7dde5; /* standard border */
--color-line-strong: #c3ccd7; /* inputs, stronger dividers */
/* Brand accent — forest green */
--color-accent: #245f4c;
--color-accent-soft: #edf5f2;
--color-accent-border: #cfe2da;
/* Warning / amber */
--color-warning: #8a4b19;
--color-warning-soft: #fff4ea;
--color-warning-border: #efcfb7;
/* Success (same as accent) */
--color-success: #245f4c;
--color-success-soft: #edf5f2;
--color-success-border: #cfe2da;
/* Brand mark palette (from logo) */
--color-brand-navy: #1e3a52; /* logo-mark background */
--color-brand-coral: #e05c4b; /* coral dot (dark logo) */
--color-brand-gold: #e8a020; /* gold dot (light logo) */
/* Modal scrim */
--color-scrim: rgba(27, 34, 44, 0.42);
}
/* ─────────────────────────────────────────
SEMANTIC COLOR ALIASES
───────────────────────────────────────── */
:root {
--fg1: var(--color-ink);
--fg2: var(--color-muted);
--surface: var(--color-card);
--surface-alt: var(--color-card-subtle);
--border: var(--color-line);
--border-strong: var(--color-line-strong);
--interactive: var(--color-accent);
--interactive-fg: #ffffff;
--danger: var(--color-warning);
--danger-bg: var(--color-warning-soft);
}
/* ─────────────────────────────────────────
TYPOGRAPHY
───────────────────────────────────────── */
/*
* Font stack:
* Display: Aptos Display → Plus Jakarta Sans (800/700 weight)
* Body: Aptos → Plus Jakarta Sans (400/500/600)
*
* Import in :
*
*
*/
:root {
--font-display: "Aptos Display", "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", sans-serif;
--font-body: "Aptos", "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", sans-serif;
--font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
}
/* Semantic type roles */
:root {
--text-xs: 0.75rem; /* 12px — tiny labels, micro-pills */
--text-sm: 0.8rem; /* ~13px — subtle, eyebrow, badge */
--text-base: 0.875rem; /* 14px — body default */
--text-md: 1rem; /* 16px — entity titles */
--text-lg: 1.35rem; /* ~22px — section titles */
--text-xl: 1.55rem; /* ~25px — metric values */
--text-2xl: clamp(1.75rem, 2.8vw, 2.4rem); /* headlines */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-normal: 1.5;
}
/* ─────────────────────────────────────────
ELEVATION & EFFECTS
───────────────────────────────────────── */
:root {
--shadow-sm: 0 1px 3px rgba(34, 45, 60, 0.06);
--shadow-md: 0 8px 20px rgba(34, 45, 60, 0.05);
--shadow-lg: 0 24px 60px rgba(29, 41, 57, 0.18); /* modals */
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 14px;
--transition-fast: 120ms ease;
--transition-normal: 200ms ease;
}
/* ─────────────────────────────────────────
SPACING SCALE
───────────────────────────────────────── */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 10px;
--space-4: 12px;
--space-5: 14px;
--space-6: 16px;
--space-7: 18px;
--space-8: 20px;
--space-9: 24px;
--space-10: 28px;
}