/* ============================================================================ CAKE DESIGN SYSTEM — Colors & Typography (drop-in tokens) Typeface: Be Vietnam Pro (primary UI, Vietnamese-optimized) + Baloo 2 (wordmark). Loaded via Google Fonts below — self-contained, paste into any project. ---------------------------------------------------------------------------- USAGE - Light is the default (:root). Add [data-theme="dark"] on or any wrapper to flip to the full dark theme. - Prefer the semantic vars (--fg-primary, --bg-surface-*, --bg-brand…) in product code. Primitives (--grey-500, --pink-500…) are for tracing/aliasing. ============================================================================ */ /* Fonts via Google Fonts — self-contained, no local files needed. Be Vietnam Pro = primary UI (Vietnamese-optimized). Baloo 2 = bubbly wordmark. For production, self-host Be Vietnam Pro and swap this import for @font-face. */ @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Baloo+2:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ---- PRIMITIVES — neutral grey ---- */ --grey-00: #ffffff; --grey-25: #f8f8f8; --grey-50: #f1f1f1; --grey-100: #ececec; --grey-200: #c7c7c7; --grey-300: #ababab; --grey-500: #737373; --grey-800: #2e2e2e; --grey-1000: #000000; /* ---- PRIMITIVES — Cake pink (brand) ---- */ --pink-50: #fef1f9; --pink-500: #ff37a5; /* brand */ --pink-600: #f01281; /* brand pressed */ --pink-700: #eb0081; /* island CTA bottom */ /* ---- PRIMITIVES — contextual ---- */ --blue-50: #eff6ff; --blue-450: #4c94f8; --blue-500: #3b82f6; --blue-600: #2563eb; --yellow-50: #fefce8; --yellow-500:#eab308; --red-50: #fef2f2; --red-500: #ef4444; --green-50: #f0fdf4; --green-500: #20b757; /* ---- PRIMITIVES — decor swatches (500 / 50) ---- */ --lime-500:#84cc16; --lime-50:#f7fee7; --indigo-500:#6366f1; --indigo-50:#eef2ff; --rose-500:#f43f5e; --rose-50:#fff1f2; --cyan-500:#06b6d4; --cyan-50:#ecfeff; --purple-500:#a855f7; --purple-50:#eef2ff; --orange-500:#f97316; --orange-50:#fff7ed; --teal-500:#14b8a6; --teal-50:#f0fdfa; --fuchsia-500:#d946ef; --fuchsia-50:#fdf4ff; /* ---- GRADIENT (use all 3 stops, in order) ---- */ --gradient-100: #45f7f7; --gradient-200: #0b6cee; --gradient-300: #f398f7; --gradient-primary: linear-gradient(135deg, #45f7f7 0%, #0b6cee 50%, #f398f7 100%); /* @kind color */ --gradient-island-cta: linear-gradient(180deg, #ff37a5 0%, #eb0081 100%); /* @kind color */ /* ============================ SEMANTIC — LIGHT ============================ */ /* foreground */ --fg-primary: #000000; --fg-secondary: #737373; --fg-tertiary: #ababab; --fg-inverse: #ffffff; --fg-brand: #ff37a5; --fg-info: #4c94f8; --fg-warning: #eab308; --fg-danger: #ef4444; --fg-success: #20b757; /* background / surface */ --bg-surface-primary: #ffffff; --bg-surface-secondary: #f8f8f8; --bg-surface-tertiary: #ececec; /* background / contextual */ --bg-brand: #ff37a5; --bg-brand-pressed: #f01281; --bg-brand-subtle: #fef1f9; --bg-info: #3b82f6; --bg-info-pressed: #2563eb; --bg-info-subtle: #eff6ff; --bg-warning: #eab308; --bg-warning-subtle:#fefce8; --bg-danger: #ef4444; --bg-danger-subtle: #fef2f2; --bg-success: #20b757; --bg-success-subtle:#f0fdf4; --bg-inverse: #000000; --bg-overlay: rgba(59, 59, 59, 0.6); /* border */ --border-primary: #c7c7c7; --border-secondary: #ececec; --border-tertiary: #f1f1f1; --border-on-surface:#ffffff; --border-brand: #ff37a5; --border-info: #3b82f6; /* disabled */ --disabled-fg: #ababab; --disabled-bg: #ececec; --disabled-border: #c7c7c7; /* component */ --toast-bg: #2e2e2e; --island-bg: #ffffff; --masker-bot: #ffffff; /* protection gradient solid stop */ --app-bg: #ffffff; /* phone page behind cards */ --icon: #394860; /* default system-icon slate */ --amount-currency: rgba(0,0,0,0.2); /* ============================ TYPOGRAPHY SCALE ============================ */ --font-sans: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Baloo 2', 'Inter', sans-serif; /* bubbly wordmark — close match to Cake's chunky logo */ /* display */ --display-xl: 700 48px/56px var(--font-sans); /* ls -1.5px */ --display-l: 700 40px/48px var(--font-sans); /* ls -1.5px */ --display-x: 600 32px/40px var(--font-sans); /* ls -1px */ /* title */ --title-xl: 600 28px/40px var(--font-sans); /* ls -0.75px */ --title-l: 600 24px/32px var(--font-sans); /* ls -0.25px */ --title-m: 600 18px/24px var(--font-sans); /* ls -0.1% */ --title-m-subtle: 500 18px/24px var(--font-sans); --title-s: 600 16px/24px var(--font-sans); /* button label */ --title-xs: 600 14px/20px var(--font-sans); --title-xs-subtle: 500 14px/20px var(--font-sans); /* body */ --body-s: 400 14px/20px var(--font-sans); --body-xs: 400 12px/20px var(--font-sans); /* caption */ --caption-m: 600 12px/20px var(--font-sans); --caption-m-subtle: 500 12px/20px var(--font-sans); --caption-s: 500 10px/16px var(--font-sans); /* ============================ RADIUS / ELEVATION ============================ */ --radius-pill: 100px; /* buttons, island */ --radius-card: 24px; /* big cards / sheets */ --radius-16: 16px; /* fields, inform message, list cards */ --radius-tab: 12px; /* tab pill */ --radius-check: 5px; /* checkbox */ --radius-island: 40px; /* floating bottom nav */ --shadow-island: 0px 0px 40px 0px rgba(0,0,0,0.12); --shadow-card: 0px 8px 24px -8px rgba(0,0,0,0.10); --shadow-sheet: 0px -8px 32px 0px rgba(0,0,0,0.12); --ease-out: cubic-bezier(0.32, 0.72, 0.02, 1.1); /* @kind other */ --dur: 200ms; /* @kind other */ } /* ============================ SEMANTIC — DARK (derived) ==================== */ [data-theme="dark"] { --fg-primary: #f5f6f8; --fg-secondary: #9ea3ad; --fg-tertiary: #6c7079; --fg-inverse: #000000; --fg-brand: #ff5cb8; --fg-info: #5ea0ff; --fg-warning: #f5c543; --fg-danger: #ff6b6b; --fg-success: #3ed47e; /* tiered dark surfaces — cards sit a step above the page for contrast */ --bg-surface-primary: #1c1b22; /* cards / chrome */ --bg-surface-secondary: #28272f; /* fields / pills / inset */ --bg-surface-tertiary: #34333c; --bg-brand: #ff37a5; --bg-brand-pressed: #f01281; --bg-brand-subtle: rgba(255,55,165,0.22); --bg-info: #3b82f6; --bg-info-pressed: #2563eb; --bg-info-subtle: rgba(94,160,255,0.20); --bg-warning: #eab308; --bg-warning-subtle:rgba(245,197,67,0.20); --bg-danger: #ef4444; --bg-danger-subtle: rgba(255,107,107,0.20); --bg-success: #20b757; --bg-success-subtle:rgba(62,212,126,0.20); --bg-inverse: #ffffff; --bg-overlay: rgba(0,0,0,0.72); --border-primary: #46454f; --border-secondary: #34333c; --border-tertiary: #2a2930; --border-on-surface:#141414; --border-brand: #ff37a5; --border-info: #3b82f6; --disabled-fg: #5c5c5c; --disabled-bg: #262626; --disabled-border: #3d3d3d; --toast-bg: #34333c; --island-bg: #26252d; --masker-bot: #100f14; --app-bg: #100f14; --icon: #c4c8d2; --amount-currency: rgba(255,255,255,0.28); --shadow-island: 0px 0px 40px 0px rgba(0,0,0,0.55); --shadow-card: 0px 10px 28px -10px rgba(0,0,0,0.6); --shadow-sheet: 0px -8px 32px 0px rgba(0,0,0,0.6); } /* ============================ SEMANTIC TEXT HELPERS ======================== */ .cake-display-xl { font: var(--display-xl); letter-spacing: -1.5px; } .cake-display-l { font: var(--display-l); letter-spacing: -1.5px; } .cake-display-x { font: var(--display-x); letter-spacing: -1px; } .cake-title-xl { font: var(--title-xl); letter-spacing: -0.75px; } .cake-title-l { font: var(--title-l); letter-spacing: -0.25px; } .cake-title-m { font: var(--title-m); letter-spacing: -0.1px; } .cake-title-s { font: var(--title-s); } .cake-title-xs { font: var(--title-xs); } .cake-body-s { font: var(--body-s); } .cake-body-xs { font: var(--body-xs); } .cake-caption-m { font: var(--caption-m); } .cake-caption-s { font: var(--caption-s); } .cake-caps { text-transform: uppercase; } /* Brand wordmark */ .cake-wordmark { font-family: var(--font-display); font-weight: 800; color: var(--fg-brand); letter-spacing: -0.01em; } /* ============================================================================ DEMO-WEB EXTENSION LAYER (I14) — additive only. New semantic tokens for the demo harness: 7 role chips + the always-dark developer console. NOTHING above this line is modified. Brand values (#ff37a5 pink accent-only, #100f14 dark page, Be Vietnam Pro) are untouched. Console tokens are theme-INDEPENDENT: the right-hand log panel stays dark even when the left device is in light theme. ============================================================================ */ :root { /* ---- mono stack for the console ---- */ --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* ---- always-dark console surface (does NOT follow [data-theme]) ---- */ --console-bg: #0d0d12; /* terminal page */ --console-surface: #16161d; /* event rows */ --console-surface-2: #1e1e27; /* expanded / hover */ --console-fg: #d6d9e0; --console-fg-dim: #868b96; --console-fg-faint: #5b606b; --console-border: #262631; --console-accent: #ff5cb8; /* pink accent for console (brand-dark) */ /* ---- 7 role chips (bright enough to read on the dark console) ---- */ --role-partner: #818cf8; /* indigo */ --role-portal-admin:#fb923c; /* orange */ --role-end-user: #2dd4bf; /* teal */ --role-miniapp: #ff5cb8; /* Cake pink */ --role-cake-auth: #60a5fa; /* blue */ --role-cn-portal: #c084fc; /* purple (chip only, never a bg wash) */ --role-hydra: #34d399; /* green */ /* ---- status badge fills for the console (2xx / 4xx / 5xx) ---- Ruling (M3 Lead): 2xx = green, 4xx & 5xx = RED (never amber). 5xx is a deeper red than 4xx so server-error still reads distinct from client-error. */ --badge-2xx-fg: #34d399; --badge-2xx-bg: rgba(52,211,153,0.16); --badge-4xx-fg: #ff6b6b; --badge-4xx-bg: rgba(255,107,107,0.16); --badge-5xx-fg: #e5484d; --badge-5xx-bg: rgba(229,72,77,0.20); }