/* ───────────────────────────────────────────────────────────── BarScore Design System — Foundations Colors, type, spacing, radii, motion. Cross-product tokens pulled from src/app/globals.css, page.tsx, ambassador.css, essay-grader/styles.module.css. ───────────────────────────────────────────────────────────── */ /* Fonts loaded from Google Fonts in index.html */ :root { /* ── Font families ──────────────────────────────────── */ --font-serif: "Shippori Mincho", "Cormorant Garamond", "Source Serif Pro", Georgia, serif; --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; /* ── Brand color (the only accent) ─────────────────── */ --color-blue: #406FB5; /* primary CTA, links, accents */ --color-blue-hover: #2F5A94; /* hover/pressed for primary blue */ --color-blue-press: #345D99; /* pressed (essay grader, blog refs) */ --color-blue-light: #93BBF5; /* scale logo fill on dark */ --color-blue-glow: rgba(64, 111, 181, 0.62); /* focus halo */ /* ── Ink (darks) ───────────────────────────────────── */ --color-black: #000000; /* hard background */ --color-ink: #0D0D0D; /* near-black text on light */ --color-ink-soft: #1A1C1E; /* dark band background (pricing, app) */ --color-charcoal: #232529; /* dark card surface */ --color-charcoal-2: #262626; /* essay grader navbar text */ --color-divider-dk: #34383D; /* dark divider */ /* ── Cool grays (the legal-document palette) ───────── */ --color-surface-light: #F6F6F6; /* unlimited pricing card surface */ --color-surface-mute: #E2E6EA; /* light CTA, wordmark on dark */ --color-surface-mid: #ACB6BF; /* feature band background, nav links */ --color-surface-band: #161618; /* ambassador screens band */ --color-bg-editorial: #F7F7F7; /* essay grader page wrapper */ --color-bg-input: #FAFAFA; /* input fill on editorial surfaces */ --color-bg-feedback: #F2F2F2; /* essay feedback panel */ /* ── Text & utility grays ──────────────────────────── */ --color-text-muted: #C5C8CC; /* plan labels, captions on dark */ --color-text-sub: #6C757D; /* secondary body, footer copy */ --color-text-body: #4A5056; /* body copy on light */ --color-text-amb: #2A2D32; /* ambassador pitch body */ --color-text-body-2: #4D5055; /* feature description (page.tsx) */ --color-border-input: #BEBEBE; /* form inputs */ --color-border-soft: #C0C0C0; /* feedback box border */ --color-border-mute: #DEE2E6; /* step dots, inactive lines */ --color-border-line: #ACB6BF; /* essay grader nav border */ --color-disabled: #B5B5B5; /* disabled CTA fill */ /* ── Whites ────────────────────────────────────────── */ --color-white: #FFFFFF; --color-near-white: #FAFAFA; /* ── Semantic (sparingly) ──────────────────────────── */ --color-pass: #429A2B; /* "Likely to Pass" score */ --color-pass-fill: #69C0C0; /* progress bar pass */ --color-fail: #D04545; /* "Unlikely to Pass" / errors */ --color-fail-fill: #F96161; /* progress bar fail */ --color-error: #D04545; /* ── Surfaces & overlays ───────────────────────────── */ --bg-page-dark: var(--color-black); /* canonical marketing bg */ --bg-page-editorial: var(--color-bg-editorial); --bg-nav-dark: rgba(0, 0, 0, 0.80); /* + backdrop-blur(10px) */ --bg-feature-band: var(--color-surface-mid); --bg-pricing-band: var(--color-ink-soft); --bg-card-dark: var(--color-charcoal); --bg-card-light: var(--color-surface-light); --bg-amb-screens: var(--color-surface-band); --bg-amb-script: var(--color-white); --bg-amb-device: #0A0A0A; --border-dark-faint: rgba(255, 255, 255, 0.06); --border-dark-soft: rgba(255, 255, 255, 0.10); --border-dark-mid: rgba(255, 255, 255, 0.20); --border-light-soft: rgba(0, 0, 0, 0.08); --hero-overlay: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.85) 100%); /* ── Radii ─────────────────────────────────────────── */ --radius-0: 0px; --radius-xs: 2px; /* primary CTA, get-started nav */ --radius-sm: 3.5px; /* feature card, hero light CTA */ --radius-md: 4px; /* pricing card, feedback box */ --radius-lg: 6px; /* misc light cards */ --radius-xl: 16px; /* ambassador video */ --radius-device-sm: 20px; /* iPhone screenshot (mobile) */ --radius-device: 28px; /* iPhone screenshot (desktop) */ --radius-full: 9999px; /* pills, dots */ /* ── Spacing ───────────────────────────────────────── */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-section-sm: 48px; --space-section-md: 64px; --space-section-lg: 80px; --space-section-xl: 100px; /* ── Container widths ──────────────────────────────── */ --max-prose: 720px; /* hero, pitch text */ --max-content: 960px; /* ambassador inner, blog body */ --max-page: 1200px; /* essay grader, marketing wide */ /* ── Elevation / shadow ────────────────────────────── */ --shadow-input-focus: 0 0 0 0.2rem rgba(74, 80, 86, 0.10); --shadow-focus-blue: 0 0 0 0.2rem rgba(64, 111, 181, 0.62); --shadow-step-active: 0 0 0 2px #fff, 0 0 0 4px var(--color-blue); --shadow-device: 0 2px 8px rgba(0,0,0,0.30), 0 12px 40px rgba(0,0,0,0.25); --shadow-device-hover:0 4px 16px rgba(0,0,0,0.40), 0 20px 60px rgba(0,0,0,0.35); --shadow-video: 0 4px 24px rgba(0,0,0,0.10); /* ── Motion ────────────────────────────────────────── */ --easing: cubic-bezier(0.4, 0, 0.2, 1); --motion-fast: 0.2s ease; --motion-medium: 0.3s ease; --motion-screenshot: 0.25s ease; --motion-spinner: 1s linear infinite; /* ── Heights ───────────────────────────────────────── */ --nav-height: 64px; --cta-height: 48px; --cta-height-sm: 40px; /* ── Backdrop blur ─────────────────────────────────── */ --blur-nav: blur(10px); /* ── Semantic typography vars ──────────────────────── */ /* Display headline (landing hero) */ --type-display-family: var(--font-serif); --type-display-weight: 600; --type-display-size: clamp(2rem, 4.5vw, 3.5rem); --type-display-leading: 1.15; --type-display-tracking:-0.01em; /* Section headline (H2) */ --type-h2-family: var(--font-serif); --type-h2-weight: 600; --type-h2-size: clamp(1.6rem, 3vw, 2rem); --type-h2-leading: 1.25; --type-h2-tracking: -0.01em; /* Card / sub-headline (H3) */ --type-h3-family: var(--font-serif); --type-h3-weight: 600; --type-h3-size: 1.5rem; --type-h3-leading: 1.3; /* Pricing numerals */ --type-pricing-family: var(--font-serif); --type-pricing-weight: 400; /* unlimited plan flips to 600 */ --type-pricing-size: 4rem; /* Body — large (ambassador pitch, landing subhead) */ --type-body-lg-family: var(--font-sans); --type-body-lg-weight: 400; --type-body-lg-size: 1.15rem; --type-body-lg-leading: 1.85; /* Body — default */ --type-body-family: var(--font-sans); --type-body-weight: 500; --type-body-size: 1rem; --type-body-leading: 1.6; /* Body — regular paragraph */ --type-body-reg-weight: 400; --type-body-reg-leading:1.7; /* Label (form labels, nav, buttons) */ --type-label-family: var(--font-sans); --type-label-weight: 500; --type-label-size: 14px; --type-label-leading: 1.4; /* Eyebrow / all-caps (section labels) */ --type-eyebrow-family: var(--font-sans); --type-eyebrow-weight: 600; --type-eyebrow-size: 11px; --type-eyebrow-tracking:0.14em; --type-eyebrow-leading: 1; /* Wordmark */ --type-wordmark-family: var(--font-serif); --type-wordmark-weight: 500; --type-wordmark-size: 1.5rem; } /* ── Semantic helpers (opt-in) ───────────────────────── Use these classes when you want the canonical treatment without restating every property. They mirror what page.tsx, ambassador.css, and styles.module.css enforce in code. ───────────────────────────────────────────────────── */ .bs-display { font-family: var(--type-display-family); font-weight: var(--type-display-weight); font-size: var(--type-display-size); line-height: var(--type-display-leading); letter-spacing: var(--type-display-tracking); } .bs-h2 { font-family: var(--type-h2-family); font-weight: var(--type-h2-weight); font-size: var(--type-h2-size); line-height: var(--type-h2-leading); letter-spacing: var(--type-h2-tracking); } .bs-h3 { font-family: var(--type-h3-family); font-weight: var(--type-h3-weight); font-size: var(--type-h3-size); line-height: var(--type-h3-leading); } .bs-body-lg { font-family: var(--type-body-lg-family); font-weight: var(--type-body-lg-weight); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-leading); } .bs-body { font-family: var(--type-body-family); font-weight: var(--type-body-weight); font-size: var(--type-body-size); line-height: var(--type-body-leading); } .bs-body-reg { font-family: var(--type-body-family); font-weight: var(--type-body-reg-weight); font-size: var(--type-body-size); line-height: var(--type-body-reg-leading); } .bs-label { font-family: var(--type-label-family); font-weight: var(--type-label-weight); font-size: var(--type-label-size); line-height: var(--type-label-leading); } .bs-eyebrow { font-family: var(--type-eyebrow-family); font-weight: var(--type-eyebrow-weight); font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-leading); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; color: var(--color-blue); } .bs-wordmark { font-family: var(--type-wordmark-family); font-weight: var(--type-wordmark-weight); font-size: var(--type-wordmark-size); color: var(--color-surface-mute); letter-spacing: 0; }