/* ============================================================ VEONA — Design Tokens The single source of truth for color, type, space, and form. Every Veona surface (website + all modules) imports this file. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---- Brand palette ---- */ --teal: #0E6B6F; /* Veona Teal — primary brand, buttons, links */ --teal-600: #0B585B; /* hover / pressed */ --teal-700: #084447; --teal-300: #4F9DA0; --teal-100: #DCEBEB; --teal-050: #EDF5F5; --ink: #0B2E33; /* Veona Ink — headlines, body, dark UI */ --ink-700: #16454B; --ink-500: #2A5A60; --indigo: #2E3A8C; /* Veona Indigo — secondary, depth, module accents */ --indigo-600: #25307A; --indigo-300: #7B83BE; --indigo-100: #E2E4F1; --indigo-050: #EEEFF7; --coral: #FF6B5C; /* Signal Coral — CTAs / highlights, sparingly */ --coral-600: #F0503F; --coral-100: #FFE3DF; /* ---- Signal / status ---- */ --green: #10A66B; /* success only */ --green-100: #DBF3E8; --amber: #F2A900; /* clinical caution */ --amber-100: #FCEFCC; --red: #D64545; /* errors / critical */ --red-100: #F8DEDE; /* ---- Neutrals ---- */ --white: #FFFFFF; --cloud: #F4F8F8; /* base surface */ --cloud-200: #E9F0F0; --line: #DCE6E6; /* hairlines, borders */ --line-soft: #EAF1F1; --slate: #6B7C82; /* secondary text */ --slate-400: #94A4A9; /* tertiary / placeholder */ --black: #07181B; /* ---- Module accent tints (teal/indigo family, coral = master only) ---- */ --acc-intake: #0E6B6F; /* Intake & Flow — teal */ --acc-clinical: #16808A; /* Clinical Care — teal-cyan */ --acc-diag: #2E3A8C; /* Diagnostics — indigo */ --acc-med: #3C7C8A; /* Medication — steel teal */ --acc-biz: #4A4FA0; /* Business — indigo-violet */ --acc-intel: #1F6E8C; /* Intelligence — deep cyan */ --acc-patient: #5A6BB8; /* Patient — soft indigo */ /* ---- Type ---- */ --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* fluid type scale */ --t-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem); --t-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); --t-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); --t-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); --t-lead: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); --t-body: 1rem; --t-sm: 0.875rem; --t-xs: 0.75rem; --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.6; /* ---- Space (4px base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---- Radius ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ---- Elevation ---- */ --sh-1: 0 1px 2px rgba(11,46,51,0.06), 0 1px 3px rgba(11,46,51,0.05); --sh-2: 0 2px 6px rgba(11,46,51,0.07), 0 6px 16px rgba(11,46,51,0.06); --sh-3: 0 8px 24px rgba(11,46,51,0.10), 0 2px 6px rgba(11,46,51,0.06); --sh-4: 0 20px 48px rgba(11,46,51,0.16), 0 6px 16px rgba(11,46,51,0.08); --maxw: 1200px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ Base reset + primitives (opt-in via .veona-base on ) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } .veona-base { margin: 0; font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .veona-base h1, .veona-base h2, .veona-base h3, .veona-base h4, .veona-base h5 { font-family: var(--font-display); color: var(--ink); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .veona-base p { margin: 0; text-wrap: pretty; } .veona-base a { color: var(--teal); text-decoration: none; } .eyebrow { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm); padding: 12px 20px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: all 0.18s var(--ease); white-space: nowrap; line-height: 1; } .btn-primary { background: var(--teal); color: #fff; } .btn-primary:hover { background: var(--teal-600); transform: translateY(-1px); box-shadow: var(--sh-2); } .btn-cta { background: var(--coral); color: #fff; } .btn-cta:hover { background: var(--coral-600); transform: translateY(-1px); box-shadow: var(--sh-2); } .btn-secondary { background: var(--white); color: var(--ink); border-color: var(--line); } .btn-secondary:hover { border-color: var(--teal); color: var(--teal); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--cloud); } .btn-lg { padding: 15px 26px; font-size: var(--t-body); border-radius: var(--r-lg); } /* ---- Badges / chips ---- */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; } .badge-teal { background: var(--teal-050); color: var(--teal); } .badge-indigo { background: var(--indigo-050); color: var(--indigo); } .badge-green { background: var(--green-100); color: #0a7a4e; } .badge-amber { background: var(--amber-100); color: #9a6c00; } .badge-red { background: var(--red-100); color: #a82f2f; } .badge-coral { background: var(--coral-100); color: var(--coral-600); } /* ---- Cards ---- */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); } .card-soft { background: var(--cloud); border-color: var(--line-soft); } /* ---- Image placeholder (source-neutral) ---- */ .img-slot { position: relative; overflow: hidden; border-radius: var(--r-lg); background: repeating-linear-gradient(135deg, var(--cloud-200) 0 12px, var(--cloud) 12px 24px); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--slate); min-height: 160px; } .img-slot::after { content: attr(data-label); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--slate-400); background: rgba(255,255,255,0.78); padding: 6px 12px; border-radius: var(--r-pill); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-6); }