/* * Imagictalk Design Tokens — aligned with the official Figma handoff (frame 103:1971). * Source of truth: Figma "Imagic Talk Web Design" › 02 · Design Tokens. * Mantener en sync con templates/components/_tailwind_config.html. * * Naming follows the handoff scale: * - Brand: 100 / 200 / 300 / 400★ / 500 / 600 / 700 / 800 (★ = primary) * - Blue: 100 / 200 / 300 / 400 / 500 * - Purple: 100 / 200 / 300 / 400 / 500 * - Neutrals: 0 / 50 / 100 / 200 / 300 / 400 / 500 / 700★ (★ = primary text) * - System: success / warning / error / info * - Tints: lavender · mint · pink · amber · amber-d * - Accents: lavender · mint · pink */ :root { /* ===== Brand Primary (handoff scale) ===== */ --brand-100: #EAFFF6; --brand-200: #CDFEE6; --brand-300: #25E2A3; --brand-400: #00E5A0; /* ★ primary brand */ --brand-500: #00A476; --brand-600: #008362; --brand-700: #005541; --brand-800: #003026; /* ===== Accent · Blue ===== */ --blue-100: #EAF1FE; --blue-200: #B7D2FF; --blue-300: #42A5EF; --blue-400: #3D6EC9; --blue-500: #193152; /* ===== Accent · Purple ===== */ --purple-100: #FEEAF8; --purple-200: #FFCFF8; --purple-300: #FB77DF; --purple-400: #D623AC; --purple-500: #B2198B; /* ===== Neutrals ===== */ --neutral-0: #FFFFFF; --neutral-50: #F8F8FC; --neutral-100: #F1F2F7; --neutral-200: #E3E6EF; --neutral-300: #A8B0C2; --neutral-400: #5F6B85; --neutral-500: #273047; --neutral-700: #121826; /* ★ primary text on light surfaces */ /* ===== System / Semantic ===== */ --success: #22C55E; --warning: #F59E0B; --error: #EF4444; --info: #3B82F6; /* ===== Soft tints (page surfaces, badges) ===== */ --tint-lavender: #F3EEFF; --tint-mint: #DEFBF5; --tint-pink: #FEEDF5; --tint-amber: #FFF6E5; --tint-amber-d: #FFE7BF; /* ===== Soft accents (illustrations, highlights) ===== */ --accent-lavender: #A78BFA; --accent-mint: #2ECFB1; --accent-pink: #F472B6; /* ===== Surfaces (light theme) ===== */ --surface: var(--neutral-0); --surface-2: var(--neutral-50); --surface-3: var(--neutral-100); --surface-4: var(--neutral-200); --surface-inverse: var(--neutral-700); /* ===== Text ===== */ --text-primary: var(--neutral-700); --text-secondary: var(--neutral-400); --text-tertiary: var(--neutral-300); --text-inverse: var(--neutral-0); --text-brand: var(--brand-500); /* ===== Borders ===== */ --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-brand: var(--brand-400); /* ===== Spacing scale (4px base) ===== */ --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; /* ===== Radius scale (handoff: 8/12/16/20/24/32/full) ===== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 999px; /* ===== Typography ===== */ --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Poppins", system-ui, sans-serif; /* Type scale (handoff fixed sizes) */ --text-display: 60px; --leading-display: 64px; --text-h1: 44px; --leading-h1: 48px; --text-h2: 32px; --leading-h2: 36px; --text-h3: 24px; --leading-h3: 28px; --text-body-lg: 18px; --leading-body-lg: 28px; --text-body: 16px; --leading-body: 24px; --text-body-sm: 14px; --leading-body-sm: 20px; --text-caption: 12px; --leading-caption: 16px; --leading-tight: 1.15; --leading-snug: 1.30; --leading-normal: 1.50; --leading-relaxed: 1.65; /* ===== Shadows / elevation ===== */ --shadow-sm: 0 1px 3px rgba(18,24,38,0.06), 0 1px 2px rgba(18,24,38,0.04); --shadow-md: 0 4px 8px -2px rgba(18,24,38,0.06), 0 2px 4px -2px rgba(18,24,38,0.04); --shadow-lg: 0 12px 24px -8px rgba(18,24,38,0.08), 0 4px 8px -4px rgba(18,24,38,0.04); --shadow-xl: 0 24px 48px -16px rgba(18,24,38,0.12); /* Brand glow — used by primary CTAs (handoff "shadow-glow") */ --shadow-brand-glow: 0 0 0 1px rgba(0,229,160,0.45) inset, 0 8px 18px -2px rgba(0,229,160,0.45), 0 22px 48px -16px rgba(0,164,118,0.55); /* ===== Motion ===== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ===== Layout (fluid: scales smoothly between mobile and desktop) ===== */ --container-page: 1440px; --container-content: 1200px; /* Smooth: 20px @ 320px → 120px @ 1440px (linear in between) */ --page-pad-x: clamp(20px, 9vw - 9px, 120px); --page-pad-x-min: clamp(20px, 7vw - 2.4px, 96px); /* Section vertical gap scales 64px → 96px smoothly */ --section-gap: clamp(64px, 6vw + 16px, 96px); /* Generic fluid gaps */ --gap-grid: clamp(16px, 2vw + 4px, 24px); --gap-content: clamp(20px, 2.5vw + 8px, 40px); } /* ===== Dark theme override (apply class="theme-dark" on or ) ===== */ .theme-dark { --surface: var(--neutral-700); --surface-2: #1A2233; --surface-3: var(--neutral-500); --surface-4: #354158; --surface-inverse: var(--neutral-0); --text-primary: var(--neutral-0); --text-secondary: var(--neutral-300); --text-tertiary: var(--neutral-400); --text-inverse: var(--neutral-700); --text-brand: var(--brand-400); --border-default: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); } /* ===== Base ===== */ html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-primary); background-color: var(--surface); } ::selection { background-color: var(--brand-200); color: var(--brand-800); } :focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; border-radius: var(--radius-sm); }