/* ============================================================ ClinicPay Design Tokens "Composed Clinical" — cool mineral palette, sharp geometry, editorial serif accents for money moments. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap"); /* Default theme — provides --theme-* tokens consumed by the semantic --color-* layer below. Provider apps swap this import (or add a [data-theme="..."] attribute on ) to retheme without touching any component code. */ @import url("./themes/default.css"); :root { /* ---------------------------------------------------------- COLOR — INK (deep teal-black, primary brand) ---------------------------------------------------------- */ --ink-50: #EBF2F9; --ink-100: #CADAEA; --ink-200: #94ACC4; --ink-300: #637E9F; --ink-400: #3D5C82; --ink-500: #1E3F61; --ink-600: #102B47; --ink-700: #0A2340; --ink-800: #0C2A48; --ink-900: #06182C; /* ---------------------------------------------------------- COLOR — SALINE (cool mineral neutrals, replaces off-white) ---------------------------------------------------------- */ --saline-50: #F4F7FA; --saline-100: #EBF2F9; /* secondary surface */ --saline-200: #DCE3EC; /* divider, row hover */ --saline-300: #C1CBD7; --saline-400: #9AA4B0; --saline-500: #727E8A; --saline-600: #586471; --saline-700: #404A55; --saline-800: #2A323B; --saline-900: #171D24; /* ---------------------------------------------------------- COLOR — SCRUB (medical scrubs blue, primary CTA / brand accent) ---------------------------------------------------------- */ --scrub-50: #EAF4FA; --scrub-100: #CFE5F2; --scrub-200: #9CC8DF; --scrub-300: #5FA6C8; --scrub-400: #3A8FB4; --scrub-500: #2680B0; /* primary */ --scrub-600: #1B6890; --scrub-700: #155270; --scrub-800: #0F3D54; --scrub-900: #082638; /* ---------------------------------------------------------- COLOR — VITAL (assured green, confirmed payment / success) ---------------------------------------------------------- */ --vital-50: #E8F5EF; --vital-100: #C9E8D9; --vital-200: #95D2B5; --vital-300: #5FB68F; --vital-400: #339B72; --vital-500: #1F8765; --vital-600: #176C51; --vital-700: #11553F; --vital-800: #0C3F2F; --vital-900: #07291E; /* ---------------------------------------------------------- COLOR — AMBER (warning / caution) ---------------------------------------------------------- */ --amber-50: #ECF2F8; --amber-100: #DCE5EE; --amber-300: #F2A03A; --amber-500: #C2410C; --amber-700: #8A2D08; /* ---------------------------------------------------------- COLOR — ALERT (error) ---------------------------------------------------------- */ --alert-50: #ECF2F8; --alert-100: #DCE5EE; --alert-500: #B91C1C; --alert-700: #861313; /* ---------------------------------------------------------- SEMANTIC SURFACES ---------------------------------------------------------- */ --color-surface: #FFFFFF; --color-surface-2: var(--saline-100); /* secondary panels, page bg in app */ --color-surface-3: var(--saline-200); /* row hover, deeper neutral */ --color-surface-inverse:var(--ink-800); --color-overlay: rgba(11, 32, 29, 0.60); /* ---------------------------------------------------------- SEMANTIC TEXT ---------------------------------------------------------- */ --color-text-primary: var(--ink-800); --color-text-secondary: var(--ink-500); --color-text-muted: var(--saline-500); --color-text-inverse: #FFFFFF; --color-text-on-accent: #FFFFFF; --color-text-link: var(--ink-700); /* ---------------------------------------------------------- SEMANTIC ROLES ---------------------------------------------------------- */ --color-ink: var(--ink-800); --color-scrub: var(--scrub-500); --color-scrub-hover: var(--scrub-600); --color-vital: var(--vital-500); --color-vital-subtle: var(--vital-50); --color-amber: var(--amber-500); --color-amber-subtle: var(--amber-50); --color-alert: var(--alert-500); --color-alert-subtle: var(--alert-50); --color-divider: var(--saline-200); --color-divider-strong: var(--saline-300); --color-border-input: var(--saline-300); --color-border-focus: var(--scrub-500); /* ---------------------------------------------------------- TYPE — FAMILIES ---------------------------------------------------------- */ --font-display: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-serif: "Instrument Serif", "Tiempos Headline", Georgia, serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------------------------------------------------------- TYPE — WEIGHTS ---------------------------------------------------------- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------------------------------------------------------- TYPE — SIZES (px) ---------------------------------------------------------- */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 60px; --text-5xl: 80px; --text-6xl: 104px; /* ---------------------------------------------------------- TYPE — LINE HEIGHT ---------------------------------------------------------- */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.4; --lh-relaxed: 1.55; --lh-loose: 1.75; /* ---------------------------------------------------------- TYPE — LETTER-SPACING ---------------------------------------------------------- */ --ls-tighter: -0.02em; --ls-tight: -0.012em; --ls-snug: -0.006em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.06em; /* uppercase clinical labels */ --ls-widest: 0.12em; /* big small-caps */ /* ---------------------------------------------------------- SEMANTIC TYPE TOKENS Heading + body roles. Use these in components rather than raw primitives where possible. ---------------------------------------------------------- */ --type-display-xl-family: var(--font-display); --type-display-xl-size: var(--text-6xl); --type-display-xl-weight: var(--fw-medium); --type-display-xl-lh: var(--lh-tight); --type-display-xl-ls: var(--ls-tighter); --type-display-lg-family: var(--font-display); --type-display-lg-size: var(--text-5xl); --type-display-lg-weight: var(--fw-medium); --type-display-lg-lh: var(--lh-tight); --type-display-lg-ls: var(--ls-tighter); --type-h1-family: var(--font-display); --type-h1-size: var(--text-4xl); --type-h1-weight: var(--fw-semibold); --type-h1-lh: var(--lh-snug); --type-h1-ls: var(--ls-tight); --type-h2-family: var(--font-display); --type-h2-size: var(--text-3xl); --type-h2-weight: var(--fw-semibold); --type-h2-lh: var(--lh-snug); --type-h2-ls: var(--ls-tight); --type-h3-family: var(--font-display); --type-h3-size: var(--text-2xl); --type-h3-weight: var(--fw-semibold); --type-h3-lh: var(--lh-snug); --type-h3-ls: var(--ls-snug); --type-h4-family: var(--font-display); --type-h4-size: var(--text-xl); --type-h4-weight: var(--fw-semibold); --type-h4-lh: var(--lh-snug); --type-body-lg-family: var(--font-body); --type-body-lg-size: var(--text-md); --type-body-lg-weight: var(--fw-regular); --type-body-lg-lh: var(--lh-relaxed); --type-body-family: var(--font-body); --type-body-size: var(--text-base); --type-body-weight: var(--fw-regular); --type-body-lh: var(--lh-relaxed); --type-body-sm-family: var(--font-body); --type-body-sm-size: var(--text-sm); --type-body-sm-weight: var(--fw-regular); --type-body-sm-lh: var(--lh-normal); --type-label-family: var(--font-body); --type-label-size: var(--text-xs); --type-label-weight: var(--fw-medium); --type-label-lh: 1; --type-label-ls: var(--ls-wider); /* "VERIFIED" microcopy */ --type-data-family: var(--font-mono); --type-data-size: var(--text-sm); --type-data-weight: var(--fw-regular); --type-data-lh: var(--lh-normal); --type-amount-family: var(--font-serif); /* the editorial dollar moment */ --type-amount-size: var(--text-5xl); --type-amount-weight: var(--fw-regular); --type-amount-lh: 1; --type-amount-ls: -0.01em; /* ---------------------------------------------------------- SPACING (base 4px) ---------------------------------------------------------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 56px; --space-11: 72px; --space-12: 96px; /* ---------------------------------------------------------- RADIUS — sharp geometry. Never above 6px on cards. ---------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-pill: 9999px; /* ---------------------------------------------------------- SHADOWS — cool ink-tinted, restrained ---------------------------------------------------------- */ --shadow-xs: 0 1px 1px rgba(11, 32, 29, 0.04); --shadow-sm: 0 1px 2px rgba(11, 32, 29, 0.05), 0 2px 6px rgba(11, 32, 29, 0.04); --shadow-md: 0 4px 12px rgba(11, 32, 29, 0.08), 0 1px 3px rgba(11, 32, 29, 0.06); --shadow-lg: 0 16px 40px rgba(11, 32, 29, 0.14); --shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--scrub-500); /* ---------------------------------------------------------- MOTION ---------------------------------------------------------- */ --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 360ms; --duration-route: 480ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1); --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1); /* aliased, NO bounce */ /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --content-max: 1200px; --app-max: 960px; --sidebar-w: 240px; } /* ============================================================ Base resets / element defaults ============================================================ */ html, body { background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--color-text-primary); margin: 0; } h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); } h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); } h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); } h4 { font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-lh); } p { margin: 0; } .cp-label { font-family: var(--type-label-family); font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-ls); text-transform: uppercase; color: var(--color-text-secondary); } .cp-amount { font-family: var(--type-amount-family); font-size: var(--type-amount-size); font-weight: var(--type-amount-weight); line-height: var(--type-amount-lh); letter-spacing: var(--type-amount-ls); color: var(--color-text-primary); font-feature-settings: "lnum", "tnum"; } .cp-data { font-family: var(--type-data-family); font-size: var(--type-data-size); font-variant-numeric: tabular-nums; }