/* =============================================================
BEBECHIC — Colors & Type tokens
Source: Bebechic_Brand Guideline (rút gọn).pdf
============================================================= */
/* --- Web fonts ----------------------------------------------- */
/* Body: Be Vietnam Pro (specified in guideline, from Google Fonts).
Display: BEBECHIC custom display font (delivered as TTF).
Slides / long-form: Ganh (delivered as OTF — used for slide decks &
printed deliverables per brand standards). */
/* NOTE: this @import keeps tokens.css self-contained (one and you have
fonts + tokens). It is render-blocking on the critical path. For perf-critical
pages, drop this line locally and instead put the Google Fonts in
with preconnect — see /docs/context.md "Load". The @font-face below stays either way. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');
@font-face {
font-family: 'BEBECHIC';
src: url('https://cdn.bebechic.vn/fonts/BEBECHIC_Black_Final.ttf') format('truetype');
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Ganh';
src: url('https://cdn.bebechic.vn/fonts/Ganh-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Ganh';
src: url('https://cdn.bebechic.vn/fonts/Ganh-RegularItalic.otf') format('opentype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Ganh';
src: url('https://cdn.bebechic.vn/fonts/Ganh-Thin.otf') format('opentype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Ganh';
src: url('https://cdn.bebechic.vn/fonts/Ganh-ThinItalic.otf') format('opentype');
font-weight: 200;
font-style: italic;
font-display: swap;
}
:root {
/* --- Palette (from brand guideline) ----------------------- */
/* Pastels — light / soft */
--bbc-mint-100: #e7fef7; /* near-white mint, wash */
--bbc-mint-200: #b6e2d3; /* secondary mint */
--bbc-mint-300: #8fd8c3; /* primary brand mint */
--bbc-mint-500: #74af9e; /* secondary deeper teal-green */
--bbc-mint-700: #176676; /* accent — deep teal */
--bbc-cream: #fffcf5; /* warm off-white background */
/* Mascot-derived accents (sampled from croc + girl illustrations) */
--bbc-blush-200: #ffd8db; /* cheek blush soft */
--bbc-blush-400: #f5a6b3; /* pink flower / cheek */
--bbc-blush-600: #d4527a; /* rosy accent */
--bbc-skin: #fde2d3; /* mascot skin tone */
--bbc-sun-300: #ffe28a; /* collar yellow */
/* Functional neutrals — kept warm to match cream base */
--bbc-ink: #1a3a40; /* near-black, tinted teal */
--bbc-ink-soft: #3d5a60;
--bbc-mute: #5f7377; /* muted caption text — darkened for WCAG AA on cream (~4.9:1) */
--bbc-line: #e8eee9;
--bbc-line-soft: #f1f4f0;
--bbc-white: #ffffff;
/* --- Semantic color roles -------------------------------- */
--bg-page: var(--bbc-cream);
--bg-surface: var(--bbc-white);
--bg-soft: var(--bbc-mint-100);
--bg-tint: var(--bbc-mint-200);
--fg-1: var(--bbc-ink); /* primary text */
--fg-2: var(--bbc-ink-soft); /* secondary text */
--fg-3: var(--bbc-mute); /* tertiary / captions */
--fg-on-dark: var(--bbc-cream);
--fg-on-brand: var(--bbc-mint-700);
--brand: var(--bbc-mint-300);
--brand-deep: var(--bbc-mint-700);
--brand-soft: var(--bbc-mint-200);
--brand-wash: var(--bbc-mint-100);
--accent-pink: var(--bbc-blush-400);
--accent-rose: var(--bbc-blush-600);
/* Additional accent aliases so components use the semantic layer, never raw --bbc-* */
--accent-sun: var(--bbc-sun-300); /* collar yellow — small highlights only */
--accent-skin: var(--bbc-skin); /* mascot skin tone */
--brand-mint-2: var(--bbc-mint-500); /* secondary deeper teal-green, for layering */
--tag-sale-bg: var(--bbc-blush-400); /* sale/badge fill */
--tag-sale-fg: var(--bbc-mint-700); /* sale/badge text */
--border: var(--bbc-line);
--border-soft: var(--bbc-line-soft);
--border-brand: var(--bbc-mint-300);
/* Semantic feedback */
--success: #6bbf8a;
--warning: #f0b54a;
--danger: #e87878;
/* --- Type families --------------------------------------- */
/* BEBECHIC = the bold display face. STRICT RULE: only used for the SINGLE
largest heading of a deliverable (e.g. deck title slide, document
cover). Never for sub-heads, body, or repeated chrome. Always UPPERCASE.
For Vietnamese headlines that need mixed-case, use --font-display-soft. */
--font-display: 'BEBECHIC', 'Quicksand', 'Be Vietnam Pro', system-ui, sans-serif;
--font-display-soft: 'Quicksand', 'Be Vietnam Pro', system-ui, sans-serif;
/* Ganh = the official slide / long-form face. Use for slide decks,
printed brand collateral, anywhere with heavy long-form content. */
--font-slide: 'Ganh', 'Be Vietnam Pro', system-ui, sans-serif;
--font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
/* UI chrome (buttons, labels, nav) — the body face. NEVER --font-display:
the BEBECHIC face is banned on repeated chrome (see STRICT RULE above). */
--font-ui: var(--font-body);
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* --- Type scale (16px base) ------------------------------ */
--t-xs: 12px;
--t-sm: 14px;
--t-base: 16px;
--t-md: 18px;
--t-lg: 20px;
--t-xl: 24px;
--t-2xl: 32px;
--t-3xl: 40px;
--t-4xl: 56px;
--t-5xl: 72px;
/* --- Spacing (8px-ish, soft) ----------------------------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
/* --- Radii — "bo mạnh 24px" (heavy rounding) ------------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px; /* brand default */
--r-xl: 32px;
--r-2xl: 48px;
--r-pill: 999px;
/* --- Shadows — "bóng nhẹ nhàng" (soft) ------------------- */
--sh-xs: 0 1px 2px rgba(23,102,118,0.06);
--sh-sm: 0 2px 6px rgba(23,102,118,0.07), 0 1px 2px rgba(23,102,118,0.04);
--sh-md: 0 8px 20px rgba(23,102,118,0.08), 0 2px 4px rgba(23,102,118,0.04);
--sh-lg: 0 18px 40px rgba(23,102,118,0.10), 0 4px 8px rgba(23,102,118,0.04);
--sh-card-hover: 0 16px 32px rgba(23,102,118,0.12);
/* Line treatment — brand calls for line + heavy radius */
--sh-line: 0 0 0 1.5px var(--bbc-mint-700);
/* --- Motion --------------------------------------------- */
--ease-soft: cubic-bezier(.22,.61,.36,1); /* soft ease-out */
--ease-bounce: cubic-bezier(.34,1.56,.64,1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 380ms;
/* --- Slide deck tokens ------------------------------------ */
/* Background priority (per BEBECHIC slide standards):
1) cream content, 2) tiffany cover/section, 3) mint-light overview */
--slide-bg-content: #FFFBF5; /* default — content slides */
--slide-bg-cover: #8FD8C3; /* tiffany — cover & section divider */
--slide-bg-overview: #E7FEF7; /* mint nhạt — overview/section list */
--slide-margin: 72px; /* equal margin all 4 sides @ 1280×720 */
--slide-chrome-fg: var(--brand-deep); /* deep teal for header/footer text */
}
/* --- Element defaults ---------------------------------------- */
html, body {
font-family: var(--font-body);
font-size: var(--t-base);
color: var(--fg-1);
background: var(--bg-page);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display-soft); /* mixed-case Vietnamese headlines */
color: var(--brand-deep);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
text-wrap: balance;
}
/* Use this class anywhere the BEBECHIC display face appears.
Brand rule: BEBECHIC font is ALWAYS uppercase. Apply .bbc-display explicitly —
do not rely on inline-style substring matching. */
.bbc-display {
text-transform: uppercase;
letter-spacing: 0.04em;
}
h1 { font-size: var(--t-4xl); font-weight: 700; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
h5 { font-size: var(--t-lg); }
p { font-size: var(--t-base); color: var(--fg-2); margin: 0; text-wrap: pretty; }
small, .caption { font-size: var(--t-sm); color: var(--fg-3); }
a {
color: var(--brand-deep);
text-decoration: none;
border-bottom: 1.5px dotted var(--brand);
transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--accent-rose); border-bottom-color: var(--accent-pink); }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--bbc-mint-100); padding: 2px 6px; border-radius: var(--r-xs); color: var(--brand-deep); }
button, .btn {
font-family: var(--font-ui); /* body face — never the BEBECHIC display face on chrome */
font-weight: 600;
font-size: var(--t-base);
padding: 12px 22px;
border-radius: var(--r-pill);
border: none;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-soft),
box-shadow var(--dur-base) var(--ease-soft),
background var(--dur-base) var(--ease-soft);
}
button:active, .btn:active { transform: translateY(1px) scale(0.98); }