/* ============================================================
MedBASE Design System — Colors & Type
Source: Figma "Viettel-TopMedix.fig" (TopMedix / MedBASE B2B)
============================================================ */
/* ---------- Web fonts ----------
* Brand: Google Sans (variable fonts supplied by user).
* /fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf — upright 100–900
* /fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf — italic 100–900
* The system is now fully self-hosted; the Google Fonts CDN in HTML
* heads is now only a defensive fallback during cache priming.
*/
@font-face {
font-family: "Google Sans";
src: url("fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf") format("truetype-variations"),
url("fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Google Sans";
src: url("fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf") format("truetype-variations"),
url("fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf") format("truetype");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* Note: link the Google Fonts stylesheet from each HTML instead of @import.
Cross-origin @import is blocked in some serve environments and causes vars to vanish.
Use: */
:root {
/* ============================================================
COLOR — RAW PALETTE (from Figma metadata top-30)
============================================================ */
/* Brand */
--mb-red-500: #EE0033; /* Viettel red — primary nav, key accent. 49 uses */
--mb-red-600: #C8002B; /* hover */
--mb-red-50: #FFEEF1; /* tint surface */
--mb-teal-900: #283E4B; /* top utility bar / dark surfaces. 59 uses */
--mb-teal-800: #304959; /* secondary teal */
--mb-orange-500: #FF7700; /* secondary accent (rating / promo). 34 uses */
--mb-blue-500: #2872E3; /* link / info */
/* Neutrals — text, surfaces, dividers */
--mb-black: #000000;
--mb-ink-900: #212121; /* primary text. 424 uses */
--mb-ink-700: #585858; /* secondary text / labels. 461 uses */
--mb-ink-500: #6F767E; /* tertiary text. 335 uses */
--mb-ink-400: #909090; /* placeholder / quiet. 221 uses */
--mb-ink-350: #8F8F8F; /* alt placeholder. 69 uses */
--mb-line-300: #C6C6C6; /* strong border / disabled bg. 268 uses */
--mb-line-200: #CFCFCF;
--mb-line-100: #EEEEEE; /* default border / divider. 318 uses */
--mb-line-050: #EFF1F4; /* very subtle */
--mb-bg-canvas: #F3F5F9; /* page background. 83 uses */
--mb-bg-surface: #FFFFFF; /* card surface */
--mb-bg-soft: #FCFCFC; /* alt surface */
--mb-bg-inverse: #000000;
/* Shadow tints (from rgba(0,0,0,*) in metadata) */
--mb-shadow-08: rgba(0, 0, 0, 0.08);
--mb-shadow-12: rgba(0, 0, 0, 0.12);
--mb-shadow-20: rgba(0, 0, 0, 0.20);
--mb-shadow-25: rgba(0, 0, 0, 0.25);
/* ============================================================
COLOR — SEMANTIC TOKENS
============================================================ */
--color-bg: var(--mb-bg-canvas);
--color-bg-elevated: var(--mb-bg-surface);
--color-bg-soft: var(--mb-bg-soft);
--color-bg-utility: var(--mb-teal-900); /* top utility bar */
--color-bg-nav: var(--mb-red-500); /* primary red nav */
--color-bg-inverse: var(--mb-black);
--color-fg: var(--mb-ink-900);
--color-fg-muted: var(--mb-ink-700);
--color-fg-subtle: var(--mb-ink-500);
--color-fg-quiet: var(--mb-ink-400);
--color-fg-on-red: #FFFFFF;
--color-fg-on-teal: #FFFFFF;
--color-fg-link: var(--mb-blue-500);
--color-border: var(--mb-line-100);
--color-border-strong:var(--mb-line-300);
--color-border-focus: var(--mb-red-500);
--color-accent: var(--mb-red-500);
--color-accent-hover: var(--mb-red-600);
--color-accent-soft: var(--mb-red-50);
--color-warning: var(--mb-orange-500);
--color-info: var(--mb-blue-500);
/* ============================================================
TYPOGRAPHY — FAMILIES
============================================================ */
--font-sans: "Google Sans", "Google Sans Text", "Inter",
-apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--font-display: var(--font-sans);
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace;
/* ============================================================
TYPOGRAPHY — SCALE (from Figma observed sizes)
============================================================ */
--fs-10: 10px;
--fs-12: 12px;
--fs-13: 13px; /* breadcrumb / utility nav */
--fs-14: 14px; /* default body, labels */
--fs-16: 16px; /* product name, prominent body */
--fs-20: 20px;
--fs-24: 24px; /* section heading */
--fs-30: 30px;
--fs-36: 36px; /* page hero heading */
--fs-40: 40px; /* big hero */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--lh-tight: 1.0; /* used heavily in Figma (line-height: 100%) */
--lh-snug: 1.25;
--lh-base: 1.5;
--lh-loose: 1.75;
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-button: 0.250px;
/* ============================================================
RADIUS / SHADOW / SPACING
============================================================ */
--r-xs: 2px;
--r-sm: 6px;
--r-md: 10px; /* button radius */
--r-lg: 12px; /* card radius */
--r-xl: 16px; /* large card radius */
--r-2xl: 24px; /* hero card radius */
--r-pill: 999px;
--shadow-xs: 0 1px 0 0 var(--mb-shadow-25); /* under-row separator */
--shadow-sm: 0 1px 2px 0 var(--mb-shadow-08);
--shadow-md: 0 2px 8px 0 var(--mb-shadow-12);
--shadow-lg: 0 8px 24px -4px var(--mb-shadow-20);
/* 4px base scale */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ============================================================
SEMANTIC TYPE STYLES (apply with class or @apply)
============================================================ */
}
/* Base */
html, body {
font-family: var(--font-sans);
color: var(--color-fg);
background: var(--color-bg);
font-size: var(--fs-14);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Display & headings — match Figma usage */
.t-hero, h1.t-hero {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-40);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--color-fg);
}
.t-h1 {
font-weight: var(--fw-bold);
font-size: var(--fs-36);
line-height: var(--lh-tight);
color: var(--color-fg);
}
.t-h2 {
font-weight: var(--fw-bold);
font-size: var(--fs-30);
line-height: var(--lh-snug);
color: var(--color-fg);
}
.t-h3, h2.t-h3 {
font-weight: var(--fw-bold);
font-size: var(--fs-24);
line-height: var(--lh-tight);
color: var(--color-fg);
}
.t-h4 {
font-weight: var(--fw-bold);
font-size: var(--fs-20);
line-height: var(--lh-snug);
color: var(--color-fg);
}
/* Body */
.t-body-lg { font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: 26px; color: var(--color-fg); }
.t-body { font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: var(--lh-base); color: var(--color-fg); }
.t-body-sm { font-size: var(--fs-13); font-weight: var(--fw-regular); line-height: 25px; color: var(--color-fg-muted); }
.t-caption { font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: var(--lh-base); color: var(--color-fg-quiet); }
/* Emphasis */
.t-product-name { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: 26px; color: var(--color-fg); }
.t-price { font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: 23px; color: var(--mb-ink-900); }
.t-label { font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-fg-muted); }
.t-tag { font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: var(--lh-tight); color: var(--color-fg-quiet); }
.t-button { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-button); }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-13); }
/* Utility text */
.t-muted { color: var(--color-fg-muted); }
.t-subtle { color: var(--color-fg-subtle); }
.t-quiet { color: var(--color-fg-quiet); }
.t-accent { color: var(--color-accent); }
.t-on-red { color: var(--color-fg-on-red); }
.t-on-teal { color: var(--color-fg-on-teal); }