/* ========================================================= ClinicBoost — Brand Tokens v1.0 · Colombia / US --------------------------------------------------------- Expert · Warm · No-nonsense · Bilingual ========================================================= */ :root { /* ----------------------------------------------------- COLOR — Primary Deep healing teal. Medical trust, modern, calm. ----------------------------------------------------- */ --cb-primary-50: oklch(0.97 0.012 180); --cb-primary-100: oklch(0.93 0.022 180); --cb-primary-200: oklch(0.85 0.038 180); --cb-primary-300: oklch(0.72 0.055 180); --cb-primary-400: oklch(0.58 0.065 180); --cb-primary-500: oklch(0.46 0.068 180); /* core */ --cb-primary-600: oklch(0.38 0.060 180); --cb-primary-700: oklch(0.30 0.048 180); --cb-primary-800: oklch(0.23 0.035 180); --cb-primary-900: oklch(0.17 0.025 180); --cb-primary: var(--cb-primary-500); --cb-primary-ink: var(--cb-primary-800); /* ----------------------------------------------------- COLOR — Secondary Soft sage. Calming counterweight to primary teal. ----------------------------------------------------- */ --cb-secondary-50: oklch(0.97 0.010 150); --cb-secondary-100: oklch(0.92 0.020 150); --cb-secondary-200: oklch(0.84 0.034 150); --cb-secondary-300: oklch(0.74 0.046 150); --cb-secondary-400: oklch(0.62 0.055 150); --cb-secondary-500: oklch(0.52 0.058 150); --cb-secondary: var(--cb-secondary-400); /* ----------------------------------------------------- COLOR — Accent Warm coral. Latin warmth, optimism, the "boost". ----------------------------------------------------- */ --cb-accent-50: oklch(0.97 0.018 38); --cb-accent-100: oklch(0.93 0.035 38); --cb-accent-200: oklch(0.86 0.065 38); --cb-accent-300: oklch(0.80 0.095 38); --cb-accent-400: oklch(0.75 0.125 38); --cb-accent-500: oklch(0.70 0.140 38); /* core */ --cb-accent-600: oklch(0.62 0.130 35); --cb-accent-700: oklch(0.52 0.115 32); --cb-accent: var(--cb-accent-500); /* ----------------------------------------------------- COLOR — Surface / Background Warm creams + ivory. Premium, never sterile. ----------------------------------------------------- */ --cb-bg: oklch(0.975 0.010 78); /* page */ --cb-surface: oklch(0.992 0.005 78); /* cards */ --cb-surface-alt: oklch(0.955 0.014 78); /* recessed */ --cb-surface-deep: oklch(0.93 0.018 78); /* hover/active */ /* ----------------------------------------------------- COLOR — Text Warm-toned blacks. Avoid pure #000. ----------------------------------------------------- */ --cb-text: oklch(0.22 0.018 70); --cb-text-muted: oklch(0.45 0.014 70); --cb-text-subtle: oklch(0.62 0.010 70); --cb-text-on-dark: oklch(0.96 0.008 78); --cb-text-on-accent: oklch(0.18 0.020 38); /* ----------------------------------------------------- COLOR — Borders & dividers ----------------------------------------------------- */ --cb-border: oklch(0.88 0.012 78); --cb-border-strong:oklch(0.78 0.014 78); /* ----------------------------------------------------- COLOR — Semantic ----------------------------------------------------- */ --cb-success: oklch(0.60 0.10 155); --cb-warning: oklch(0.78 0.13 80); --cb-danger: oklch(0.58 0.16 28); --cb-info: oklch(0.62 0.09 230); /* ----------------------------------------------------- TYPOGRAPHY Display: Instrument Serif (warm, editorial) Body: Manrope (clean, friendly, geometric) Mono: JetBrains Mono (for product/code surfaces) ----------------------------------------------------- */ --cb-font-display: "Instrument Serif", "Iowan Old Style", "Palatino", Georgia, serif; --cb-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --cb-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — modular 1.250 (major third), base 16px */ --cb-text-xs: 0.75rem; /* 12 */ --cb-text-sm: 0.875rem; /* 14 */ --cb-text-base: 1rem; /* 16 */ --cb-text-md: 1.125rem; /* 18 */ --cb-text-lg: 1.375rem; /* 22 */ --cb-text-xl: 1.75rem; /* 28 */ --cb-text-2xl: 2.25rem; /* 36 */ --cb-text-3xl: 3rem; /* 48 */ --cb-text-4xl: 4rem; /* 64 */ --cb-text-5xl: 5.5rem; /* 88 */ /* Weights */ --cb-weight-regular: 400; --cb-weight-medium: 500; --cb-weight-semibold: 600; --cb-weight-bold: 700; /* Tracking */ --cb-tracking-tight: -0.02em; --cb-tracking-normal: 0; --cb-tracking-wide: 0.04em; --cb-tracking-eyebrow:0.14em; /* Leading */ --cb-leading-tight: 1.05; --cb-leading-snug: 1.2; --cb-leading-body: 1.55; --cb-leading-loose: 1.75; /* ----------------------------------------------------- SPACING — 4px base ----------------------------------------------------- */ --cb-space-1: 0.25rem; --cb-space-2: 0.5rem; --cb-space-3: 0.75rem; --cb-space-4: 1rem; --cb-space-5: 1.5rem; --cb-space-6: 2rem; --cb-space-7: 3rem; --cb-space-8: 4rem; --cb-space-9: 6rem; --cb-space-10: 8rem; /* ----------------------------------------------------- RADII ----------------------------------------------------- */ --cb-radius-xs: 4px; --cb-radius-sm: 8px; --cb-radius-md: 12px; --cb-radius-lg: 20px; --cb-radius-xl: 28px; --cb-radius-pill: 999px; /* ----------------------------------------------------- SHADOWS — Warm, soft ----------------------------------------------------- */ --cb-shadow-xs: 0 1px 2px oklch(0.20 0.02 70 / 0.06); --cb-shadow-sm: 0 2px 6px oklch(0.20 0.02 70 / 0.06), 0 1px 2px oklch(0.20 0.02 70 / 0.04); --cb-shadow-md: 0 8px 20px oklch(0.20 0.02 70 / 0.08), 0 2px 4px oklch(0.20 0.02 70 / 0.04); --cb-shadow-lg: 0 24px 48px oklch(0.20 0.02 70 / 0.10), 0 4px 8px oklch(0.20 0.02 70 / 0.04); --cb-shadow-glow: 0 0 0 6px oklch(0.70 0.14 38 / 0.18); /* ----------------------------------------------------- MOTION ----------------------------------------------------- */ --cb-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --cb-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --cb-dur-1: 120ms; --cb-dur-2: 220ms; --cb-dur-3: 420ms; }