/* ============================================================ AI 5 Phút — Design System Tokens (Light Apple + tím công nghệ) ============================================================ */ /* Fonts are loaded via + stylesheet in each page's so they no longer sit behind a nested CSS @import chain that blocks first paint. Weight 300 was dropped (unused). */ :root { /* ---------------------------------------------------------- BACKGROUNDS — Apple light system ---------------------------------------------------------- */ --bg-primary: #fbfbfd; /* Off-white page bg (Apple's signature) */ --bg-secondary: #f5f5f7; /* Subtle section/card alt */ --bg-card: #ffffff; /* Pure white card */ --bg-card-hover: #fafafa; --bg-muted: #f5f5f7; /* ---------------------------------------------------------- BORDERS — hairline alpha (Apple style) ---------------------------------------------------------- */ --border-default: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.04); --border-strong: rgba(0, 0, 0, 0.14); /* ---------------------------------------------------------- TEXT ---------------------------------------------------------- */ --text-primary: #1d1d1f; /* Apple near-black */ --text-secondary: #515154; /* Body secondary */ --text-muted: #6e6e73; /* Caption grey — darkened to meet WCAG AA (4.5:1) on light bg */ --text-placeholder: #c7c7cc; --text-on-color: #ffffff; /* ---------------------------------------------------------- BRAND PALETTE — SF/iOS Blue → Indigo → Purple ---------------------------------------------------------- */ --brand-blue: #0a84ff; /* iOS SF Blue (primary) */ --brand-blue-light: #4ba3ff; --brand-blue-dark: #0066cc; /* hover/pressed */ --brand-blue-dim: rgba(10, 132, 255, 0.10); --brand-indigo: #5856d6; /* SF Indigo */ --brand-indigo-light: #7d7be0; --brand-indigo-dim: rgba(88, 86, 214, 0.10); --brand-purple: #af52de; /* SF Purple */ --brand-purple-light: #c77ce8; --brand-purple-dim: rgba(175, 82, 222, 0.10); /* Signature gradient — used on logo, primary CTA, hero accent text */ --brand-gradient: linear-gradient(135deg, #0a84ff 0%, #5856d6 50%, #af52de 100%); --brand-gradient-soft: linear-gradient(135deg, #e8f1ff 0%, #f0eeff 100%); --brand-gradient-2: linear-gradient(135deg, #5856d6 0%, #af52de 100%); /* ---------------------------------------------------------- SEMANTIC ACCENTS — iOS system colors ---------------------------------------------------------- */ --accent-success: #34c759; /* iOS Green */ --accent-success-dim: rgba(52, 199, 89, 0.12); --accent-warning: #ff9500; /* iOS Amber */ --accent-warning-dim: rgba(255, 149, 0, 0.12); --accent-danger: #ff3b30; /* iOS Red */ --accent-danger-dim: rgba(255, 59, 48, 0.10); /* ---------------------------------------------------------- TYPOGRAPHY — FAMILIES ---------------------------------------------------------- */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', monospace; /* ---------------------------------------------------------- TYPOGRAPHY — SIZE SCALE ---------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.1875rem; /* 19px (Apple body lead) */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 3rem; /* 48px */ --text-4xl: 4rem; /* 64px */ --text-5xl: 4.75rem; /* 76px */ /* ---------------------------------------------------------- TYPOGRAPHY — WEIGHTS ---------------------------------------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------------------------------------------------------- SPACING & LAYOUT ---------------------------------------------------------- */ --section-py-desktop: 6rem; --section-py-mobile: 3rem; --container-max-width: 1180px; --container-px: 1.5rem; /* ---------------------------------------------------------- BORDER RADIUS — Apple's friendly rounded scale ---------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 9999px; /* ---------------------------------------------------------- SHADOWS — soft, layered, Apple-style ---------------------------------------------------------- */ --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04); --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); --shadow-lift-blue: 0 8px 32px rgba(10,132,255,0.16), 0 2px 6px rgba(0,0,0,0.04); --shadow-lift-purple: 0 8px 32px rgba(175,82,222,0.18), 0 2px 6px rgba(0,0,0,0.04); --shadow-btn-primary: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(10,132,255,0.24); --shadow-btn-gradient:0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(88,86,214,0.32); /* ---------------------------------------------------------- ANIMATION ---------------------------------------------------------- */ --ease-apple: cubic-bezier(0.2, 0.8, 0.2, 1); --transition-fast: 0.15s var(--ease-apple); --transition-base: 0.20s var(--ease-apple); --transition-slow: 0.40s var(--ease-apple); } /* ---------------------------------------------------------- LOGO MARK — italic mono wordmark with gradient ---------------------------------------------------------- */ .logo-mark { font-family: var(--font-mono); font-weight: 700; font-style: italic; letter-spacing: -0.02em; background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; padding-right: 0.18em; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--text-primary); background-color: var(--bg-primary); line-height: 1.55; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); letter-spacing: -0.03em; line-height: 1.1; } h1 { font-size: clamp(40px, 6.4vw, 76px); font-weight: var(--weight-bold); letter-spacing: -0.04em; line-height: 1.02; } h2 { font-size: clamp(28px, 4.2vw, 52px); font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1.05; } h3 { font-size: 22px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.2; } h4 { font-size: 17px; font-weight: var(--weight-semibold); letter-spacing: -0.015em; } p { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--text-secondary); line-height: 1.55; letter-spacing: -0.011em; } p.lead { font-size: var(--text-lg); color: var(--text-secondary); letter-spacing: -0.012em; line-height: 1.5; } small, .text-sm { font-size: var(--text-sm); color: var(--text-muted); } code, pre { font-family: var(--font-mono); font-size: 0.875em; background: var(--bg-muted); border: 0.5px solid var(--border-default); border-radius: var(--radius-sm); padding: 0.15em 0.45em; color: var(--brand-indigo); } /* ---------------------------------------------------------- GRADIENT TEXT UTILITIES ---------------------------------------------------------- */ .gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text-2 { background: var(--brand-gradient-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---------------------------------------------------------- SECTION LAYOUT ---------------------------------------------------------- */ .section { padding: var(--section-py-desktop) 0; } .container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--container-px); } /* Logo wordmark — italic mono with brand gradient */ .logo-mark { font-family: var(--font-mono); font-weight: var(--weight-bold); font-style: italic; letter-spacing: -0.02em; background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }