/* ============================================================ SUA English — Design Tokens Aesthetic: Apple / Linear / Notion / Duolingo + AI SaaS Minimal · Premium · Glass · Rounded · Blue/Indigo brand ============================================================ */ :root { /* Brand */ --brand: #4f46e5; /* indigo-600 */ --brand-600: #4f46e5; --brand-700: #4338ca; --brand-500: #6366f1; --brand-400: #818cf8; --brand-soft: rgba(79, 70, 229, 0.10); --brand-soft-2: rgba(79, 70, 229, 0.16); --accent: #2563eb; /* blue-600 */ --accent-soft: rgba(37, 99, 235, 0.10); /* Semantic — Light (warm linen) */ --bg: #f3efe6; --bg-grad-1: #efe9dd; --bg-grad-2: #f6f2ea; --surface: #fbf9f3; --surface-1: #f7f3ec; --surface-2: #efe9df; --surface-3: #e7e0d3; --card: rgba(252, 250, 244, 0.72); --card-solid: #fcfaf4; --glass-border: rgba(43, 38, 32, 0.08); --glass-shadow: 0 1px 2px rgba(43, 38, 32, 0.05), 0 12px 32px -12px rgba(43, 38, 32, 0.14); --text: #2b2620; --text-2: #4a4339; --text-muted: #8a8073; --text-faint: #b3a99a; --text-invert: #f7f3ec; --border: rgba(43, 38, 32, 0.10); --border-strong: rgba(43, 38, 32, 0.16); --ring: rgba(79, 70, 229, 0.35); /* Linen texture (painted on body::before, fixed + pointer-events:none) 颗粒更细、颜色更贴近底色：远看是纸感，近看才有亚麻籽，不显脏。 */ --linen-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); --flaxseed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.24' numOctaves='2' seed='9' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.63 0 0 0 0 0.56 0 0 0 0 0.43 0 0 0 13 -10.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.2'/%3E%3C/svg%3E"); --success: #16a34a; --success-soft: rgba(22, 163, 74, 0.12); --warning: #d97706; --warning-soft: rgba(217, 119, 6, 0.12); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.10); --info: #0891b2; /* Skill accent colors — desaturated to avoid rainbow-AI feel */ --c-vocab: #7c7fd1; --c-grammar: #5aa6c9; --c-listen: #5db5a9; --c-read: #d4a85c; --c-write: #cf7ba8; --c-speak: #a392d6; --c-ielts: #5e8bd6; --c-toefl: #c76a95; /* Radii */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(43, 38, 32, 0.06); --shadow-sm: 0 2px 8px -2px rgba(43, 38, 32, 0.10); --shadow-md: 0 8px 24px -10px rgba(43, 38, 32, 0.18); --shadow-lg: 0 18px 48px -16px rgba(43, 38, 32, 0.22); --shadow-brand: 0 8px 24px -10px rgba(79, 70, 229, 0.16); /* Typography */ --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-serif: "Newsreader", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif; --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 46px; --fs-4xl: 60px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.6; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --nav-h: 64px; --maxw: 1180px; --content-pad: 24px; } /* 主题由 app.js / state.js 写在 上，这里必须同时匹配属性选择器； 保留 .dark 以兼容手动加类的场景。 */ :root[data-theme='dark'], .dark { --brand: #818cf8; --brand-600: #6366f1; --brand-700: #818cf8; --brand-500: #a5b4fc; --brand-400: #c7d2fe; --brand-soft: rgba(129, 140, 248, 0.14); --brand-soft-2: rgba(129, 140, 248, 0.22); --accent: #60a5fa; --accent-soft: rgba(96, 165, 250, 0.14); --bg: #16130f; --bg-grad-1: #1c1813; --bg-grad-2: #14110d; --surface: #1f1b16; --surface-1: #221d17; --surface-2: #2a241c; --surface-3: #342c22; --card: rgba(245, 235, 220, 0.05); --card-solid: #1e1a15; --glass-border: rgba(245, 235, 220, 0.10); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -16px rgba(0, 0, 0, 0.65); --text: #f3ece0; --text-2: #d8cfc0; --text-muted: #a89c88; --text-faint: #7a6f5d; --text-invert: #16130f; --border: rgba(245, 235, 220, 0.10); --border-strong: rgba(245, 235, 220, 0.18); --ring: rgba(129, 140, 248, 0.5); /* Linen specks on dark read as light flax fibers — 同样更细更淡 */ --flaxseed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='2' seed='4' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.82 0 0 0 0 0.74 0 0 0 0 0.62 0 0 0 13 -10.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.12'/%3E%3C/svg%3E"); --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.14); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.14); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.14); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 10px -2px rgba(0, 0, 0, 0.55); --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.7); --shadow-lg: 0 22px 56px -18px rgba(0, 0, 0, 0.8); --shadow-brand: 0 10px 34px -8px rgba(129, 140, 248, 0.5); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }