/* ────────────────────────────────────────────────────────────────── LearnWise design tokens Source of truth: frontends/admin-fe/src/styles/{colors.ts, theme.tsx, globals.css} and frontends/chat-fe/src/styles/{theme.tsx, globals.css}. Mantine 8 + Tailwind v4 drive the product; these variables mirror the Mantine theme so a static HTML prototype paints identically. ────────────────────────────────────────────────────────────────── */ :root { /* ── Brand ───────────────────────────────────────────────────── */ /* Primary brand navy ("brand800") shows up in the logo, sidebar, */ /* headings and primary buttons. The mascot dot-of-the-i is cyan. */ --lw-brand-50: #F4F9FF; --lw-brand-100: #E7F3FF; --lw-brand-200: #D1E9FF; --lw-brand-300: #B1D6FF; --lw-brand-400: #8BBFFF; --lw-brand-500: #5EA4FF; --lw-brand-600: #3585FF; --lw-brand-700: #0F63F4; --lw-brand-800: #0139D9; --lw-brand-900: #0122D2; /* Dark navy scale — used for sidebar, nav, headings, dark surfaces */ --lw-navy-50: #ECEFFE; --lw-navy-100: #D4D9F7; --lw-navy-200: #A5B0F0; --lw-navy-300: #7485EC; --lw-navy-400: #1225A6; --lw-navy-500: #0A1B7A; --lw-navy-600: #07155F; /* --brand800 in code */ --lw-navy-700: #06114C; /* sidebar logo tile */ --lw-navy-800: #030D41; --lw-navy-900: #02082A; --lw-navy-950: #010313; /* Blue-accent (figma frequently uses #052BFF for toggles / focus) */ --lw-electric: #052BFF; /* Cyan — LearnWise mascot accent: dot of the "i", illustrations */ --lw-cyan-50: #E0FFFF; --lw-cyan-100: #CCFDFF; --lw-cyan-200: #9CF9FF; /* --turquoise1 */ --lw-cyan-300: #68F6FE; --lw-cyan-400: #44F2FE; --lw-cyan-500: #30F0FE; --lw-cyan-600: #1EF0FE; --lw-cyan-700: #00D5E3; --lw-cyan-800: #00BECA; --lw-cyan-900: #00A5B0; /* ── Neutrals (Mantine "gray" + cool grays from figma metadata) ── */ --lw-white: #FFFFFF; --lw-gray-25: #FDFDFD; --lw-gray-50: #FAFAFA; --lw-gray-100: #F5F5F5; --lw-gray-150: #F9FAFB; /* --gray50 */ --lw-gray-175: #F9F9FB; /* --gray-cool-50 */ --lw-gray-200: #E9EAEB; /* strokes */ --lw-gray-250: #EAECF0; --lw-gray-300: #D5D7DA; --lw-gray-400: #A4A7AE; --lw-gray-500: #717680; /* text tertiary */ --lw-gray-600: #535862; --lw-gray-650: #4B5563; --lw-gray-700: #414651; /* text secondary */ --lw-gray-800: #252B37; --lw-gray-900: #181D27; /* text primary */ --lw-gray-950: #0A0D12; --lw-black: #1A1E1F; /* Mantine `black` */ /* Semantic text */ --lw-text-primary: var(--lw-gray-900); --lw-text-secondary: var(--lw-gray-700); --lw-text-tertiary: var(--lw-gray-500); --lw-text-disabled: var(--lw-gray-400); --lw-text-on-navy: #FFFFFF; --lw-text-brand: var(--lw-navy-600); --lw-text-link: var(--lw-brand-700); /* Surfaces */ --lw-bg-canvas: var(--lw-gray-150); /* app canvas */ --lw-bg-subtle: var(--lw-gray-175); --lw-bg-surface: var(--lw-white); --lw-bg-surface-muted: var(--lw-gray-50); --lw-bg-inverse: var(--lw-navy-700); /* Borders */ --lw-border-subtle: var(--lw-gray-200); --lw-border-default: var(--lw-gray-300); --lw-border-strong: var(--lw-gray-400); --lw-border-focus: var(--lw-navy-600); /* ── Status / feedback (Mantine scales, lifted verbatim) ──────── */ --lw-success-50: #ECFDF3; --lw-success-100: #DCFAE6; --lw-success-200: #A8EFC6; /* --success200 */ --lw-success-500: #47CD89; --lw-success-600: #17B26A; --lw-success-700: #067647; --lw-success-800: #074D31; --lw-warning-50: #FFFAEB; --lw-warning-100: #FEF0C7; --lw-warning-500: #FDB022; --lw-warning-600: #F79009; --lw-warning-700: #DC6803; --lw-warning-800: #B54708; --lw-error-50: #FEF3F2; --lw-error-100: #FEE4E2; --lw-error-500: #F97066; --lw-error-600: #F04438; --lw-error-700: #B42318; --lw-error-800: #912018; --lw-info-50: #EFF8FF; --lw-info-100: #E7F3FF; --lw-info-200: #B2DDFF; --lw-info-700: #175CD3; --lw-info-800: #1849A9; /* Accent purple — Insights, AI / analytics viz */ --lw-purple-50: #F4F3FF; --lw-purple-100: #EBE9FE; --lw-purple-200: #D9D6FE; --lw-purple-500: #7A5AF8; --lw-purple-600: #6938EF; --lw-purple-700: #5925DC; /* ── Typography ──────────────────────────────────────────────── */ --lw-font-sans: 'Satoshi', 'Hiragino Sans', 'Yu Gothic', Meiryo, system-ui, -apple-system, 'Segoe UI', sans-serif; --lw-font-mono: 'Menlo', 'Courier Prime', ui-monospace, monospace; --lw-fw-regular: 400; --lw-fw-medium: 500; --lw-fw-bold: 700; --lw-fw-black: 900; /* Type scale — ref: Satoshi usage in figma (14/16/12/18/20/24) */ --lw-text-xs: 12px; --lw-text-sm: 14px; /* body default in product */ --lw-text-md: 16px; /* form inputs */ --lw-text-lg: 18px; --lw-text-xl: 20px; --lw-text-2xl: 24px; --lw-text-3xl: 30px; --lw-text-4xl: 40px; --lw-text-5xl: 60px; --lw-lh-tight: 1.15; --lw-lh-snug: 1.3; --lw-lh-normal: 1.45; --lw-lh-relaxed: 1.6; /* ── Spacing (Mantine xs/sm/md/lg/xl) ────────────────────────── */ --lw-space-1: 4px; --lw-space-2: 8px; /* Mantine xs (overridden in chat-fe) */ --lw-space-3: 12px; /* Mantine sm */ --lw-space-4: 16px; /* Mantine md */ --lw-space-5: 20px; /* Mantine lg */ --lw-space-6: 24px; --lw-space-8: 32px; /* Mantine xl */ --lw-space-10: 40px; --lw-space-12: 48px; --lw-space-16: 64px; /* ── Radii (Mantine defaults: xs 2, sm 4, md 8, lg 16, xl 32) ─ */ --lw-radius-xs: 4px; --lw-radius-sm: 6px; --lw-radius-md: 8px; /* default for Buttons/Inputs/ActionIcon */ --lw-radius-lg: 12px; --lw-radius-xl: 16px; --lw-radius-2xl: 20px; --lw-radius-pill: 999px; /* ── Shadows (from figma metadata: 10/13/18 tint on near-black) ─ */ --lw-shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.05); --lw-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06); --lw-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); --lw-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); --lw-shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); --lw-shadow-focus: 0 0 0 4px rgba(59, 130, 246, 0.25); /* searchInput focus */ /* Motion */ --lw-ease: cubic-bezier(0.22, 1, 0.36, 1); --lw-duration: 250ms; --lw-transition: all var(--lw-duration) ease-out; } /* Utility helpers for prototypes ------------------------------------ */ html, body { font-family: var(--lw-font-sans); color: var(--lw-text-primary); background: var(--lw-bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .lw-focus-ring:focus-visible { outline: none; border-color: var(--lw-border-focus) !important; box-shadow: var(--lw-shadow-focus); }