/* ============================================================ Design Tokens — Notion-inspired Study-Abroad SaaS Light + Dark dual theme via CSS variables. Usage: - Default: light (also when [data-theme="light"]) - Dark: [data-theme="dark"] OR prefers-color-scheme: dark - Theme switch writes to ============================================================ */ :root, [data-theme="light"] { /* ---- Surfaces / Backgrounds ---- */ --color-bg-app: #ffffff; /* page background */ --color-bg-surface: #ffffff; /* card / panel */ --color-bg-subtle: #f7f6f3; /* sidebar, zebra */ --color-bg-muted: #f1f1ef; /* hover row, secondary fill */ --color-bg-inverse: #2f3437; /* tooltip, inverse pill */ --color-bg-overlay: rgba(15, 15, 15, 0.40); /* ---- Text ---- */ --color-text-primary: #37352f; /* primary ink */ --color-text-secondary:#6b6b67; /* secondary body */ --color-text-tertiary: #9b9a97; /* meta, help, placeholder */ --color-text-disabled: #c7c6c3; --color-text-inverse: #ffffff; --color-text-link: #5145cd; /* ---- Borders / Dividers ---- */ --color-border-default:#e9e9e7; --color-border-strong: #dcdbd7; --color-border-subtle: #ebebea; --color-border-focus: #5145cd; /* ---- Brand (single, restrained) ---- */ --color-brand-primary: #5145cd; --color-brand-hover: #4338ca; --color-brand-active: #3a31ae; --color-brand-soft: #eeecf9; /* tinted fill */ --color-brand-ink: #312a8c; /* text on soft */ /* ---- State colors (Notion-like muted tones) ---- */ --color-success: #0f7b0f; --color-success-soft: #e4efe4; --color-success-ink: #0a5a0a; --color-warn: #cb912f; --color-warn-soft: #f7ecd7; --color-warn-ink: #8a5e10; --color-danger: #d44c47; --color-danger-soft: #fbe4e2; --color-danger-ink: #9c2a25; --color-info: #5145cd; --color-info-soft: #eeecf9; --color-info-ink: #312a8c; --color-neutral: #6b6b67; --color-neutral-soft: #f1f1ef; --color-neutral-ink: #37352f; /* ---- KPI card accent tints ---- */ --color-kpi-blue: #eaf3fb; --color-kpi-blue-ink: #1f5b8f; --color-kpi-green: #e4efe4; --color-kpi-green-ink: #0a5a0a; --color-kpi-purple: #eeecf9; --color-kpi-purple-ink:#312a8c; --color-kpi-amber: #f7ecd7; --color-kpi-amber-ink: #8a5e10; --color-kpi-rose: #fbe4e2; --color-kpi-rose-ink: #9c2a25; /* ---- Shadows (subtle) ---- */ --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-lg: 0 12px 32px rgba(15, 15, 15, 0.10), 0 2px 6px rgba(15, 15, 15, 0.05); --shadow-focus: 0 0 0 3px rgba(81, 69, 205, 0.25); } [data-theme="dark"] { --color-bg-app: #191919; --color-bg-surface: #202020; --color-bg-subtle: #1c1c1c; --color-bg-muted: #2a2a2a; --color-bg-inverse: #f1f1ef; --color-bg-overlay: rgba(0, 0, 0, 0.55); --color-text-primary: #e6e6e4; --color-text-secondary:#b4b4b0; --color-text-tertiary: #888885; --color-text-disabled: #5a5a58; --color-text-inverse: #1a1a1a; --color-text-link: #9d92ff; --color-border-default:#2f2f2f; --color-border-strong: #3d3d3d; --color-border-subtle: #262626; --color-border-focus: #9d92ff; --color-brand-primary: #8b7fff; --color-brand-hover: #9d92ff; --color-brand-active: #ab9fff; --color-brand-soft: #2a2549; --color-brand-ink: #d1c9ff; --color-success: #4ea14e; --color-success-soft: #1e2c1e; --color-success-ink: #8fc98f; --color-warn: #e0a740; --color-warn-soft: #302513; --color-warn-ink: #f2cc83; --color-danger: #e66a66; --color-danger-soft: #3a1f1e; --color-danger-ink: #f2a29e; --color-info: #9d92ff; --color-info-soft: #2a2549; --color-info-ink: #d1c9ff; --color-neutral: #b4b4b0; --color-neutral-soft: #2a2a2a; --color-neutral-ink: #e6e6e4; --color-kpi-blue: #1c2a38; --color-kpi-blue-ink: #87b9e0; --color-kpi-green: #1e2c1e; --color-kpi-green-ink: #8fc98f; --color-kpi-purple: #2a2549; --color-kpi-purple-ink:#d1c9ff; --color-kpi-amber: #302513; --color-kpi-amber-ink: #f2cc83; --color-kpi-rose: #3a1f1e; --color-kpi-rose-ink: #f2a29e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-focus: 0 0 0 3px rgba(157, 146, 255, 0.35); } /* Follow system if no explicit preference is set on */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg-app: #191919; --color-bg-surface: #202020; --color-bg-subtle: #1c1c1c; --color-bg-muted: #2a2a2a; --color-bg-inverse: #f1f1ef; --color-bg-overlay: rgba(0, 0, 0, 0.55); --color-text-primary: #e6e6e4; --color-text-secondary:#b4b4b0; --color-text-tertiary: #888885; --color-text-disabled: #5a5a58; --color-text-inverse: #1a1a1a; --color-text-link: #9d92ff; --color-border-default:#2f2f2f; --color-border-strong: #3d3d3d; --color-border-subtle: #262626; --color-border-focus: #9d92ff; --color-brand-primary: #8b7fff; --color-brand-hover: #9d92ff; --color-brand-active: #ab9fff; --color-brand-soft: #2a2549; --color-brand-ink: #d1c9ff; --color-success: #4ea14e; --color-success-soft: #1e2c1e; --color-success-ink: #8fc98f; --color-warn: #e0a740; --color-warn-soft: #302513; --color-warn-ink: #f2cc83; --color-danger: #e66a66; --color-danger-soft: #3a1f1e; --color-danger-ink: #f2a29e; --color-info: #9d92ff; --color-info-soft: #2a2549; --color-info-ink: #d1c9ff; --color-neutral: #b4b4b0; --color-neutral-soft: #2a2a2a; --color-neutral-ink: #e6e6e4; --color-kpi-blue: #1c2a38; --color-kpi-blue-ink: #87b9e0; --color-kpi-green: #1e2c1e; --color-kpi-green-ink: #8fc98f; --color-kpi-purple: #2a2549; --color-kpi-purple-ink:#d1c9ff; --color-kpi-amber: #302513; --color-kpi-amber-ink: #f2cc83; --color-kpi-rose: #3a1f1e; --color-kpi-rose-ink: #f2a29e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-focus: 0 0 0 3px rgba(157, 146, 255, 0.35); } } /* ============================================================ Non-color tokens (shared across themes) ============================================================ */ :root { /* ---- Spacing scale (rem-based for responsive) ---- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ /* ---- Radii ---- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* ---- Typography ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Inter, "Microsoft YaHei", "Hiragino Sans GB", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono CJK SC", monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 — table / body dense */ --text-base: 0.875rem; /* 14 — default */ --text-lg: 1rem; /* 16 — section title */ --text-xl: 1.125rem; /* 18 */ --text-2xl: 1.375rem; /* 22 */ --text-3xl: 1.75rem; /* 28 */ --text-4xl: 2.25rem; /* 36 */ --leading-tight: 1.3; --leading-normal: 1.55; --leading-loose: 1.75; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ---- Motion ---- */ --motion-fast: 120ms; --motion-normal: 180ms; --motion-slow: 260ms; --ease-standard: cubic-bezier(0.2, 0, 0.13, 1.5); /* ---- Z-index ---- */ --z-sticky: 10; --z-drawer: 40; --z-modal: 50; --z-toast: 60; } /* ============================================================ Base reset (shared across mockups) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-primary); background: var(--color-bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-feature-settings: "tnum" 1, "cv11" 1; } a { color: var(--color-text-link); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* scrollbar (Notion-like thin) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 10px; border: 2px solid var(--color-bg-app); } ::-webkit-scrollbar-track { background: transparent; }