/* ============================================================================= Apneural Design System , Colors & Type AI-powered claims intelligence for dental offices and DSOs. ============================================================================= */ /* ---------- Web fonts (Google Fonts substitutes , see README) -------------- */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ============================ COLORS ===================================== */ /* Brand & accent , Apneural Blue is the single chromatic accent */ --color-primary: #1A8CFF; /* Apneural Blue , CTAs, logo, highlights */ --color-primary-hover: #0F73E0; /* Pressed / hover state */ --color-primary-light: #5FB0FF; /* Inline typographic emphasis ("denials") */ --color-primary-soft: #E8F2FF; /* Faintest tint , chip backgrounds, focus rings */ /* Surface */ --color-canvas: #FFFFFF; /* Pure white default page */ --color-surface-1: #F7F9FC; /* Light gray , secondary buttons, alt rows */ --color-surface-2: #EEF2F8; /* Slightly darker , dividers as fill */ --color-surface-wash: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 60%, #F6F4FF 100%); /* Airy hero wash */ /* Text */ --color-ink: #0B1220; /* High-contrast charcoal for headlines & body */ --color-ink-muted: #5B6478; /* Nav, secondary copy, sublabels */ --color-ink-subtle: #98A1B2; /* Captions, helper, disabled */ --color-inverse-ink: #FFFFFF; /* Text on primary / dark surfaces */ /* Borders / hairlines */ --color-hairline: #E6EAF1; /* 1px borders on cards, inputs */ --color-hairline-strong:#0B1220; /* Carbon-style focus underline (rare) */ /* Semantic */ --color-success: #14B870; /* Status pills, "Active" */ --color-success-soft: #E3F8EE; --color-warning: #E5A53A; /* "Review" pill */ --color-warning-soft: #FCEFD6; --color-error: #E5484D; --color-error-soft: #FCE8E9; /* Shadows , soft, diffuse, sparing */ --shadow-1: 0 1px 2px rgba(11, 18, 32, 0.04), 0 1px 1px rgba(11, 18, 32, 0.03); --shadow-2: 0 8px 24px -8px rgba(11, 18, 32, 0.08), 0 2px 6px rgba(11, 18, 32, 0.04); --shadow-3: 0 24px 48px -16px rgba(11, 18, 32, 0.12), 0 8px 16px -8px rgba(11, 18, 32, 0.06); --shadow-fab:0 12px 28px -8px rgba(26, 140, 255, 0.45), 0 4px 10px rgba(11, 18, 32, 0.08); /* ============================ TYPE ======================================= */ /* Families */ --font-display: 'Fraunces', 'GT Super Display', 'Playfair Display', Georgia, serif; --font-sans: 'Inter', 'Roobert', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Display sizes , Serif, weighted, dense leading */ --type-display-xl-size: 64px; --type-display-xl-weight: 600; --type-display-xl-lh: 1.08; --type-display-xl-tracking: -0.02em; --type-display-lg-size: 48px; --type-display-lg-weight: 600; --type-display-lg-lh: 1.10; --type-display-lg-tracking: -0.02em; --type-display-md-size: 36px; --type-display-md-weight: 600; --type-display-md-lh: 1.15; --type-display-md-tracking: -0.015em; /* UI / body , Sans-serif */ --type-headline-size: 24px; --type-headline-weight: 600; --type-headline-lh: 1.30; --type-body-lg-size: 20px; --type-body-lg-weight: 400; --type-body-lg-lh: 1.50; --type-body-size: 16px; --type-body-weight: 400; --type-body-lh: 1.55; --type-body-sm-size: 14px; --type-body-sm-weight: 400; --type-body-sm-lh: 1.50; --type-button-size: 15px; --type-button-weight: 500; --type-button-lh: 1.0; --type-caption-size: 13px; --type-caption-weight: 500; --type-caption-lh: 1.40; --type-caption-tracking: 0.02em; /* ============================ SPACING ==================================== */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-section: 96px; /* ============================ RADII ====================================== */ --radius-none: 0px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Hero dashboard card */ --radius-pill: 9999px; /* All buttons, chips */ --radius-circle: 50%; /* FAB, avatars */ } /* ============================ SEMANTIC ELEMENT STYLES ====================== */ html { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-canvas); } body { font: var(--type-body-weight) var(--type-body-size)/var(--type-body-lh) var(--font-sans); color: var(--color-ink); } h1, .h1 { font-family: var(--font-display); font-weight: var(--type-display-xl-weight); font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh); letter-spacing: var(--type-display-xl-tracking); color: var(--color-ink); margin: 0; } h2, .h2 { font-family: var(--font-display); font-weight: var(--type-display-lg-weight); font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh); letter-spacing: var(--type-display-lg-tracking); color: var(--color-ink); margin: 0; } h3, .h3 { font-family: var(--font-display); font-weight: var(--type-display-md-weight); font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh); letter-spacing: var(--type-display-md-tracking); color: var(--color-ink); margin: 0; } h4, .h4 { font-family: var(--font-sans); font-weight: var(--type-headline-weight); font-size: var(--type-headline-size); line-height: var(--type-headline-lh); color: var(--color-ink); margin: 0; } p, .body { font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-ink); } .lead { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); color: var(--color-ink-muted); } .caption { font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking); color: var(--color-ink-muted); } .text-accent { color: var(--color-primary); } .text-accent-soft { color: var(--color-primary-light); } .text-muted { color: var(--color-ink-muted); } .text-subtle { color: var(--color-ink-subtle); } code, .mono { font-family: var(--font-mono); font-size: 0.875em; }