/* ============================================================ MOCA Design System — Colors & Type CÔNG TY TNHH SẢN XUẤT VÀ THƯƠNG MẠI MOCA Compact HPL / CDF / Formica panels, toilet partitions, raised flooring, aluminum ceilings. ============================================================ */ /* Google Fonts: Be Vietnam Pro (Vietnamese-optimized), Archivo (display, industrial weight), JetBrains Mono (specs/mono). */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ─── BRAND COLORS ───────────────────────────────────────── */ /* Primary orange — industrial safety orange, the MOCA signature */ --moca-orange: #FF6B1A; --moca-orange-600: #E85400; /* hover / pressed */ --moca-orange-700: #C44400; /* deepest, for borders on orange */ --moca-orange-300: #FFA065; /* tint, soft fills */ --moca-orange-100: #FFE3D2; /* very soft wash */ --moca-orange-50: #FFF5EE; /* page-tint backgrounds */ /* Black + charcoal — the second pillar */ --moca-black: #0A0A0A; /* near-pure black, text on light */ --moca-ink: #1A1612; /* warm black, primary text */ --moca-charcoal: #2A241E; /* dark surface */ --moca-graphite: #3D362E; /* secondary dark */ /* Warm neutrals — paired with orange feel grounded, industrial */ --moca-gray-700: #4A433B; --moca-gray-600: #6B6358; --moca-gray-500: #908577; --moca-gray-400: #B5AB9C; --moca-gray-300: #D4CCBE; --moca-gray-200: #E8E2D6; --moca-gray-100: #F3EFE7; --moca-cream: #FAF7F0; /* off-white page surface */ --moca-white: #FFFFFF; /* ─── SEMANTIC TOKENS ────────────────────────────────────── */ --fg-1: var(--moca-ink); /* primary text */ --fg-2: var(--moca-gray-600); /* secondary text */ --fg-3: var(--moca-gray-500); /* tertiary / placeholder */ --fg-on-dark: var(--moca-cream); --fg-on-orange: var(--moca-white); --fg-accent: var(--moca-orange); --fg-link: var(--moca-orange-600); --bg-page: var(--moca-cream); --bg-surface: var(--moca-white); --bg-surface-alt: var(--moca-gray-100); --bg-inverse: var(--moca-ink); --bg-accent: var(--moca-orange); --bg-accent-soft: var(--moca-orange-50); --border-1: var(--moca-gray-300); /* default dividers */ --border-2: var(--moca-gray-400); /* stronger borders */ --border-strong: var(--moca-ink); /* feature borders */ --border-accent: var(--moca-orange); /* Status */ --color-success: #2E7D32; --color-warning: #C77700; --color-danger: #B91C1C; --color-info: #1F5E8C; /* ─── ELEVATION ──────────────────────────────────────────── */ /* Crisp, industrial — minimal soft shadows. Prefer hard borders. */ --shadow-sm: 0 1px 0 rgba(26, 22, 18, 0.06), 0 1px 2px rgba(26, 22, 18, 0.04); --shadow-md: 0 2px 4px rgba(26, 22, 18, 0.06), 0 4px 12px rgba(26, 22, 18, 0.08); --shadow-lg: 0 8px 24px rgba(26, 22, 18, 0.12), 0 2px 6px rgba(26, 22, 18, 0.06); --shadow-orange: 0 6px 16px rgba(255, 107, 26, 0.32); /* ─── RADIUS ─────────────────────────────────────────────── */ /* MOCA leans industrial — small radii or sharp corners. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 9999px; /* ─── SPACING ────────────────────────────────────────────── */ --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; --space-20: 80px; --space-24: 96px; /* ─── TYPE FAMILIES ──────────────────────────────────────── */ --font-display: 'Archivo', 'Be Vietnam Pro', system-ui, sans-serif; --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; /* ─── TYPE SCALE (base 16px) ─────────────────────────────── */ --fs-display-1: clamp(48px, 6vw, 96px); --fs-display-2: clamp(40px, 5vw, 72px); --fs-h1: clamp(32px, 3.5vw, 52px); --fs-h2: clamp(26px, 2.6vw, 38px); --fs-h3: 22px; --fs-h4: 18px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-overline: 11px; /* Line-heights */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; } /* ─── BASE STYLES ─────────────────────────────────────────────── */ html { font-family: var(--font-sans); } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ─── SEMANTIC TYPE STYLES ────────────────────────────────────── */ .t-display-1, .t-display-2 { font-family: var(--font-display); font-weight: 900; line-height: var(--lh-tight); letter-spacing: -0.02em; text-transform: uppercase; color: var(--fg-1); } .t-display-1 { font-size: var(--fs-display-1); } .t-display-2 { font-size: var(--fs-display-2); } .t-h1, h1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--fg-1); } .t-h2, h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--fg-1); } .t-h3, h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); color: var(--fg-1); } .t-h4, h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; color: var(--fg-1); } .t-body-lg, .lede { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); } .t-body, p { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-1); } .t-body-sm, small { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); } .t-caption { font-size: var(--fs-caption); line-height: 1.35; color: var(--fg-2); } .t-overline, .eyebrow { font-family: var(--font-sans); font-size: var(--fs-overline); font-weight: 700; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-accent); } .t-mono, code, pre { font-family: var(--font-mono); font-size: 0.92em; } /* Spec labels — used for product dimensions, like "2440 × 1830 mm" */ .t-spec { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--fg-2); }