/* =====================================================================
Trellios.ai — Colors & Type Foundations
The AI Workforce Operating System for Growing Businesses
Font: Inter (Google Fonts). Load in HTML :
===================================================================== */
:root {
/* ---- Brand: Primary ---------------------------------------------- */
--navy: #142B45; /* Deep Navy — trust, stability, enterprise */
--navy-700: #1E3A5C; /* lifted navy for hover/elevated surfaces */
--navy-900: #0D1E33; /* deepest navy — footers, dark hero */
--teal: #1EC8C8; /* Teal — intelligence, automation */
--teal-600: #15A8A8; /* teal hover / pressed */
--teal-100: #D7F5F5; /* teal tint — badges, active nav bg */
/* ---- Neutrals ---------------------------------------------------- */
--white: #FFFFFF;
--slate: #4A5568; /* primary muted text, secondary copy */
--slate-soft: #7A8794; /* ".ai" lockup, tertiary text, captions */
--light-gray: #F5F7FA; /* app canvas / page background */
--medium-gray: #CBD5E0; /* borders, dividers, disabled */
--hairline: #E5E9F0; /* subtle 1px borders on light surfaces */
/* ---- Accent / Semantic ------------------------------------------ */
--success: #22C55E;
--warning: #F59E0B;
--error: #EF4444;
--info: #6366F1;
--primary-action: #3B82F6; /* blue CTA where teal is not used */
/* ---- Semantic surface + text tokens ----------------------------- */
--bg: var(--light-gray);
--surface: var(--white);
--surface-2: #FBFCFD;
--bg-dark: var(--navy);
--fg1: var(--navy); /* headings, primary text */
--fg2: var(--slate); /* body, secondary */
--fg3: var(--slate-soft); /* captions, meta */
--fg-on-dark: var(--white);
--fg2-on-dark: #B7C2D0;
--fg3-on-dark: #7E8DA0;
--border: var(--hairline);
--border-strong: var(--medium-gray);
--focus-ring: rgba(30, 200, 200, 0.45);
/* ---- Type families ---------------------------------------------- */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
/* ---- Type scale (px / line-height) ------------------------------ */
--text-display: 56px; --lh-display: 64px; --tracking-display: -0.02em;
--text-h1: 40px; --lh-h1: 48px; --tracking-h1: -0.02em;
--text-h2: 30px; --lh-h2: 38px; --tracking-h2: -0.01em;
--text-h3: 22px; --lh-h3: 30px; --tracking-h3: -0.01em;
--text-lg: 18px; --lh-lg: 28px;
--text-base: 16px; --lh-base: 24px;
--text-sm: 14px; --lh-sm: 20px;
--text-xs: 12px; --lh-xs: 16px;
--fw-regular: 400; /* @kind font */
--fw-medium: 500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold: 700; /* @kind font */
--fw-extra: 800; /* @kind font */
/* ---- Radius ------------------------------------------------------ */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-pill: 999px;
/* ---- Spacing (4px base) ----------------------------------------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
/* ---- Elevation / shadow ----------------------------------------- */
--shadow-xs: 0 1px 2px rgba(20, 43, 69, 0.06);
--shadow-sm: 0 1px 3px rgba(20, 43, 69, 0.08), 0 1px 2px rgba(20, 43, 69, 0.04);
--shadow-md: 0 4px 12px rgba(20, 43, 69, 0.08), 0 2px 4px rgba(20, 43, 69, 0.04);
--shadow-lg: 0 12px 28px rgba(20, 43, 69, 0.12), 0 4px 8px rgba(20, 43, 69, 0.05);
--shadow-teal: 0 6px 18px rgba(30, 200, 200, 0.28);
/* ---- Motion ------------------------------------------------------ */
--ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur: 200ms; /* @kind other */
--dur-slow: 320ms; /* @kind other */
}
/* =====================================================================
Semantic type classes — apply directly or copy the rules.
===================================================================== */
.t-display { font-family: var(--font-sans); font-weight: var(--fw-bold);
font-size: var(--text-display); line-height: var(--lh-display);
letter-spacing: var(--tracking-display); color: var(--fg1); }
.t-h1 { font-family: var(--font-sans); font-weight: var(--fw-bold);
font-size: var(--text-h1); line-height: var(--lh-h1);
letter-spacing: var(--tracking-h1); color: var(--fg1); }
.t-h2 { font-family: var(--font-sans); font-weight: var(--fw-semibold);
font-size: var(--text-h2); line-height: var(--lh-h2);
letter-spacing: var(--tracking-h2); color: var(--fg1); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold);
font-size: var(--text-h3); line-height: var(--lh-h3);
letter-spacing: var(--tracking-h3); color: var(--fg1); }
.t-lead { font-family: var(--font-sans); font-weight: var(--fw-regular);
font-size: var(--text-lg); line-height: var(--lh-lg); color: var(--fg2); }
.t-body { font-family: var(--font-sans); font-weight: var(--fw-regular);
font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg2); }
.t-sm { font-family: var(--font-sans); font-weight: var(--fw-regular);
font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg2); }
.t-caption { font-family: var(--font-sans); font-weight: var(--fw-medium);
font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg3); }
/* Eyebrow / section label — small caps, tracked, common in moodboard */
.t-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-semibold);
font-size: var(--text-xs); line-height: var(--lh-xs);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm);
line-height: var(--lh-sm); color: var(--fg2); }