/* ============================================================ Ada Design System — Tokens Colors + Typography + Spacing + Radii + Shadows ============================================================ */ /* ============================================================ Brand font — Montserrat (local TTFs in ./fonts/) ============================================================ */ @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ThinItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; } :root { /* ------------------------------------------------------------ COLOR — Base palette ------------------------------------------------------------ */ /* Brand greens */ --ink: #25523E; /* PRM — primary / hero bg */ --ink-deep: #173A2A; /* footer, depth shadow */ --mint: #C5F0DB; /* soft mint tint */ --mint-soft: #E5F7EE; /* AI bubble bg, soft accents */ --lime: #D3FF8B; /* CTA button color */ /* Secondary brand */ --blue: #9CC1FF; /* SCND1 — secondary accent */ --peach: #FFC87B; /* SCND2 — warm accent */ /* Light pastels — use as soft tinted backgrounds (iconboxes, stat cards, accent panels). Always pair with black/ink text. */ --blue-light: #D6E6FF; /* light SCND1 */ --peach-light: #FFE4BD; /* light SCND2 */ --lime-light: #EBFAC4; /* light CTA */ /* Neutrals — paper tones */ --paper: #FAF7F1; /* page bg */ --white: #FFFFFF; /* content cards, section bg, text-on-ink */ --stone-100: #ECE7DC; /* hairline on cream */ --stone-300: #CFC8B8; /* divider */ --stone-500: #8B8676; /* muted text on light */ --stone-700: #4A4738; /* secondary text on light */ /* Semantic */ --success: #1D9E75; --info: #378ADD; --warning: #EF9F27; --danger: #E24B4A; /* ------------------------------------------------------------ COLOR — Semantic surface / text tokens ------------------------------------------------------------ */ /* Surfaces */ --surface-page: var(--paper); --surface-section: var(--white); --surface-card: var(--white); --surface-dark: var(--ink); --surface-dark-deep: var(--ink-deep); --surface-ai-bubble: var(--mint-soft); /* Light pastel surfaces (named) */ --surface-tint-blue: var(--blue-light); --surface-tint-peach: var(--peach-light); --surface-tint-lime: var(--lime-light); /* Foreground (text) */ --fg-1: #000000; /* primary text on light — pure black */ --fg-2: var(--stone-700); /* secondary text on light */ --fg-3: var(--stone-500); /* muted text on light */ --fg-on-dark-1: var(--white); /* primary text on Ink */ --fg-on-dark-2: #B8C9C4; /* secondary text on Ink */ --fg-on-dark-3: #6F8884; /* muted text on Ink */ /* Borders / hairlines */ --border-1: var(--stone-100); --border-2: var(--stone-300); --border-dark: rgba(245, 240, 232, 0.10); /* Accents */ --accent-1: var(--mint); --accent-2: var(--lime); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(197, 240, 219, 0.55); /* ------------------------------------------------------------ TYPOGRAPHY — Base ------------------------------------------------------------ */ /* The brand uses a single bespoke sans. Inter is the documented proxy for engineering / open-source surfaces. */ --font-sans: "Montserrat", -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* Type scale */ --fs-display: 64px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 22px; --fs-h4: 18px; --fs-body: 16px; --fs-small: 13px; --fs-eyebrow: 12px; --lh-tight: 1.05; --lh-snug: 1.15; --lh-normal: 1.4; --lh-relaxed: 1.55; --tracking-tight: -0.03em; --tracking-snug: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-eyebrow: 0.1em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ------------------------------------------------------------ SPACING — 4px base ------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Layout */ --container-max: 1200px; --gutter: 24px; --section-y: 96px; /* 72–120px range */ /* ------------------------------------------------------------ RADII ------------------------------------------------------------ */ --r-2: 6px; --r-3: 12px; --r-4: 20px; /* default card */ --r-5: 32px; /* large feature block */ --r-pill: 999px; /* buttons, chips, badges */ /* ------------------------------------------------------------ SHADOWS — soft, never crunchy ------------------------------------------------------------ */ --shadow-1: 0 1px 2px rgba(10, 46, 42, 0.04), 0 1px 1px rgba(10, 46, 42, 0.03); --shadow-2: 0 4px 14px rgba(10, 46, 42, 0.06), 0 1px 3px rgba(10, 46, 42, 0.04); --shadow-3: 0 14px 40px rgba(10, 46, 42, 0.10), 0 4px 10px rgba(10, 46, 42, 0.05); /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms; } /* ============================================================ SEMANTIC TYPE STYLES ============================================================ */ html { font-family: var(--font-sans); color: var(--fg-1); background: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-size: var(--fs-body); line-height: var(--lh-relaxed); } .display, h1.display { font-size: clamp(40px, 5.2vw, var(--fs-display)); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg-1); margin: 0; text-wrap: balance; } h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.1; color: var(--fg-1); margin: 0; text-wrap: balance; } h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); line-height: 1.15; color: var(--fg-1); margin: 0; text-wrap: balance; } h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.25; color: var(--fg-1); margin: 0; } h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--fg-1); margin: 0; } p, .body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; text-wrap: pretty; } .lead { font-size: 18px; line-height: 1.5; color: var(--fg-2); } .small, small { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-3); } .eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); } code, .mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-1); }