/* ============================================================================ * Sinh Vũ Design Tokens v1.0 — STANDALONE * ---------------------------------------------------------------------------- * Layer foundation duy nhất cho mọi surface Sinh Vũ: * - sinhvu.work (Cockpit) * - yeucau.sinhvu.work (Customer intake) * - Cửa 03 SPA (Interview tool) * - Print A4 (proposal, contract, brief) * * Single source of truth. Sửa 1 chỗ, sync mọi nơi. * * Usage trong yeucau / Cửa 03: * * Hoặc copy file này vào codebase nội bộ. * ============================================================================ */ :root { /* ─── COLOR · BRAND ─────────────────────────────────────────── */ --sv-orange-50: #FFF7ED; --sv-orange-100: #FFEDD5; --sv-orange-200: #FED7AA; --sv-orange-300: #FDBA74; --sv-orange-400: #FB9A3C; --sv-orange-500: #F47521; /* ★ brand primary */ --sv-orange-600: #DB5C11; --sv-orange-700: #B85918; --sv-orange-800: #8F3F12; --sv-orange-900: #6B2F0F; --sv-navy-50: #F4F5F8; --sv-navy-100: #E5E8EF; --sv-navy-200: #C9CFDC; --sv-navy-300: #9BA5BB; --sv-navy-400: #6B7691; --sv-navy-500: #4F5A75; --sv-navy-600: #364260; --sv-navy-700: #1F2A44; /* ★ brand secondary */ --sv-navy-800: #131A2C; --sv-navy-900: #0A0E1A; /* ─── COLOR · NEUTRAL (warm paper) ──────────────────────────── */ --sv-paper: #FCFCFA; --sv-paper-card: #FFFFFF; --sv-paper-sunk: #F4F5F7; --sv-paper-cream: #FFF8E6; --sv-line: #E8E5DE; --sv-line-strong: #D6D2C8; /* ─── COLOR · SEMANTIC ─────────────────────────────────────── */ --sv-success-50: #E8F5EE; --sv-success-500: #2D7D5F; --sv-success-700: #1F5C44; --sv-warning-50: #FFF4E5; --sv-warning-500: #B85918; --sv-warning-700: #8F3F12; --sv-danger-50: #FBE9EC; --sv-danger-500: #B23A48; --sv-info-50: #E8F0F8; --sv-info-500: #1F5A8F; /* Text colors (semantic aliases) */ --sv-text: var(--sv-navy-700); --sv-text-muted: var(--sv-navy-500); --sv-text-faint: var(--sv-navy-400); --sv-text-on-dark: #FFFFFF; --sv-accent: var(--sv-orange-500); --sv-accent-hover: var(--sv-orange-600); /* ─── TYPOGRAPHY · 4 ROLE-BASED FAMILIES ────────────────────── * Quy chuẩn: mỗi family có 1 vai trò duy nhất, không lẫn lộn. * Italic CHỈ dùng --sv-f-display, không family khác. * ──────────────────────────────────────────────────────────── */ /* HEADINGS + điểm nhấn đặc biệt (h1-h6, em emphasis, price hero) */ --sv-f-display: 'Noto Serif Display', 'Noto Serif', Georgia, serif; /* PARAGRAPHS (body text, descriptions, taglines, lede). Regular, không italic. */ --sv-f-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* LABELS (eyebrow, button, badge, meta caps, nav, breadcrumb) — display sans for UI sharpness */ --sv-f-label: 'Noto Sans Display', 'Noto Sans', -apple-system, system-ui, sans-serif; /* CODE + dẫn chứng kỹ thuật (token names, duration, file paths, refs) */ --sv-f-mono: 'Noto Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Alias backward-compat (sẽ deprecate dần — KHÔNG dùng cho code mới) */ --sv-f-sans: var(--sv-f-body); /* ─── TYPOGRAPHY · SCALE (Major Third 1.250, fluid) ─────────── */ --sv-t-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem); --sv-t-sm: clamp(0.875rem, 0.83rem + 0.21vw, 1rem); --sv-t-base: clamp(1rem, 0.94rem + 0.26vw, 1.125rem); --sv-t-md: clamp(1.125rem, 1.05rem + 0.36vw, 1.25rem); --sv-t-lg: clamp(1.25rem, 1.13rem + 0.55vw, 1.5625rem); --sv-t-xl: clamp(1.5625rem,1.36rem + 0.95vw, 1.953rem); --sv-t-2xl: clamp(1.953rem, 1.65rem + 1.42vw, 2.441rem); --sv-t-3xl: clamp(2.441rem, 1.98rem + 2.16vw, 3.052rem); --sv-t-4xl: clamp(3.052rem, 2.36rem + 3.24vw, 3.815rem); --sv-t-5xl: clamp(3.815rem, 2.78rem + 4.84vw, 4.768rem); --sv-t-display: clamp(3.815rem, 2.5rem + 6.15vw, 5.96rem); /* Line-heights */ --sv-lh-tight: 1; --sv-lh-snug: 1.1; --sv-lh-normal: 1.3; --sv-lh-relaxed: 1.5; --sv-lh-loose: 1.65; --sv-lh-prose: 1.75; /* Letter-spacing */ --sv-ls-tight: -0.03em; --sv-ls-snug: -0.02em; --sv-ls-normal: -0.005em; --sv-ls-wide: 0.04em; --sv-ls-wider: 0.12em; --sv-ls-widest: 0.18em; /* Font weights */ --sv-fw-regular: 400; --sv-fw-medium: 500; --sv-fw-semibold: 600; --sv-fw-bold: 700; --sv-fw-extrabold: 800; --sv-fw-black: 900; /* ─── SPACING · 4pt grid ────────────────────────────────────── */ --sv-s-0: 0; --sv-s-1: 4px; --sv-s-2: 8px; --sv-s-3: 12px; --sv-s-4: 16px; --sv-s-5: 24px; --sv-s-6: 32px; --sv-s-7: 48px; --sv-s-8: 64px; --sv-s-9: 96px; --sv-s-10: 128px; --sv-s-11: 192px; /* ─── RADII ─────────────────────────────────────────────────── */ --sv-r-xs: 4px; --sv-r-sm: 6px; --sv-r-md: 8px; --sv-r-lg: 12px; --sv-r-xl: 16px; --sv-r-2xl: 24px; --sv-r-full: 9999px; /* ─── SHADOWS ───────────────────────────────────────────────── */ --sv-shadow-xs: 0 1px 2px rgba(19, 26, 44, 0.04); --sv-shadow-sm: 0 2px 4px rgba(19, 26, 44, 0.05), 0 1px 2px rgba(19, 26, 44, 0.03); --sv-shadow-md: 0 4px 12px rgba(19, 26, 44, 0.07), 0 2px 4px rgba(19, 26, 44, 0.04); --sv-shadow-lg: 0 12px 32px rgba(19, 26, 44, 0.10), 0 4px 8px rgba(19, 26, 44, 0.05); --sv-shadow-xl: 0 24px 64px rgba(19, 26, 44, 0.14), 0 8px 16px rgba(19, 26, 44, 0.06); --sv-shadow-2xl: 0 40px 96px rgba(19, 26, 44, 0.18); --sv-shadow-glow: 0 0 0 4px rgba(244, 117, 33, 0.18); /* ─── MOTION · durations ───────────────────────────────────── */ --sv-d-instant: 80ms; --sv-d-fast: 150ms; --sv-d-base: 240ms; --sv-d-slow: 400ms; --sv-d-lazy: 640ms; /* ─── MOTION · easings ─────────────────────────────────────── */ --sv-e-out: cubic-bezier(0.16, 1, 0.3, 1); --sv-e-in: cubic-bezier(0.7, 0, 0.84, 0); --sv-e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --sv-e-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --sv-e-linear: linear; /* ─── LAYOUT ───────────────────────────────────────────────── */ --sv-max-content: 1240px; --sv-max-prose: 720px; --sv-max-narrow: 560px; --sv-max-hero: 1080px; --sv-bp-sm: 640px; --sv-bp-md: 768px; --sv-bp-lg: 1024px; --sv-bp-xl: 1280px; --sv-bp-2xl: 1536px; /* ─── Z-INDEX scale ────────────────────────────────────────── */ --sv-z-base: 0; --sv-z-card: 10; --sv-z-sticky: 100; --sv-z-modal: 1000; --sv-z-toast: 2000; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }