/* ============================================================ EMBER DESIGN TOKENS — ported verbatim from the Claude Design "A股选股网站原型设计" project (ember design system) so colors, type scale, spacing, radii and motion match the design 1:1. ============================================================ */ :root { /* ---- Warm neutrals: cream → ink ---- */ --cream-50: #FBF8F3; --cream-100: #F6F1E8; --cream-200: #EDE5D8; --cream-300: #E1D7C6; --sand-400: #CABDA7; --taupe-500: #A1917B; --taupe-600: #7C7060; --ink-700: #564E43; --ink-800: #39342C; --ink-900: #211E18; --warm-white:#FEFCF8; /* ---- Primary · Ember (terracotta coral) ---- */ --clay-50: #FBEEE7; --clay-100: #F6D9CB; --clay-200: #EFBEA6; --clay-300: #E6A081; --clay-400: #DD8462; --clay-500: #D26B47; --clay-600: #BB5734; --clay-700: #98472A; /* ---- Secondary · Honey (amber) ---- */ --honey-50: #FBF1DC; --honey-100: #F8E4BD; --honey-300: #F0C771; --honey-500: #E3A53E; --honey-600: #C9852A; /* ---- Sage (success / positive) ---- */ --sage-50: #E9F0E4; --sage-100: #D6E5CC; --sage-500: #6E9B63; --sage-600: #557A4D; /* ---- Sky (info / links accent) ---- */ --sky-50: #E2ECF1; --sky-100: #CFE0EA; --sky-500: #5E8CAE; --sky-600: #466F8E; /* ---- Berry (error / danger) ---- */ --berry-50: #F7DfD9; --berry-100: #F1CBC2; --berry-500: #C5524A; --berry-600: #A23C36; /* Surfaces & backgrounds */ --color-bg: var(--cream-50); --color-bg-sunken: var(--cream-100); --surface-card: var(--warm-white); --surface-raised: #FFFFFF; --surface-overlay: var(--warm-white); --surface-inverse: var(--ink-900); /* Text */ --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--taupe-600); --text-subtle: var(--taupe-500); --text-onfill: var(--warm-white); --text-link: var(--clay-600); /* Primary action */ --color-primary: var(--clay-500); --color-primary-hover: var(--clay-600); --color-primary-press: var(--clay-700); --color-primary-soft: var(--clay-50); --color-primary-softer: var(--clay-100); /* Secondary action */ --color-secondary: var(--honey-500); --color-secondary-hover: var(--honey-600); --color-secondary-soft: var(--honey-50); /* Borders & dividers */ --border-subtle: var(--cream-200); --border-soft: var(--cream-300); --border-strong: var(--sand-400); --border-focus: var(--clay-500); /* Semantic status — NOTE: danger=up/red, success=down/green (红涨绿跌) */ --color-success: var(--sage-500); --color-success-soft: var(--sage-50); --color-warning: var(--honey-500); --color-warning-soft: var(--honey-50); --color-danger: var(--berry-500); --color-danger-soft: var(--berry-50); --color-info: var(--sky-500); --color-info-soft: var(--sky-50); --ring-focus: 0 0 0 3px rgba(210, 107, 71, 0.28); /* Families */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Type scale (1.20 minor-third, rem) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 3.75rem; /* Line heights */ --leading-tight: 1.12; --leading-snug: 1.28; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* Spacing — 4px base grid */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --container-sm: 40rem; --container-md: 56rem; --container-lg: 72rem; --control-sm: 2rem; --control-md: 2.75rem; --control-lg: 3.25rem; /* Corner radii */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-2xl: 36px; --radius-pill: 999px; --radius-round: 50%; --border-width: 1px; --border-width-thick: 1.5px; /* Warm-tinted shadows */ --shadow-xs: 0 1px 2px rgba(75, 60, 45, 0.06); --shadow-sm: 0 1px 3px rgba(75, 60, 45, 0.08), 0 1px 2px rgba(75, 60, 45, 0.05); --shadow-md: 0 4px 10px rgba(75, 60, 45, 0.08), 0 2px 4px rgba(75, 60, 45, 0.05); --shadow-lg: 0 12px 28px rgba(75, 60, 45, 0.12), 0 4px 10px rgba(75, 60, 45, 0.06); --shadow-xl: 0 24px 56px rgba(58, 45, 33, 0.18), 0 8px 18px rgba(58, 45, 33, 0.08); --shadow-inset: inset 0 1px 2px rgba(75, 60, 45, 0.08); --shadow-glow: 0 6px 20px rgba(210, 107, 71, 0.28); /* Durations */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 340ms; --dur-slower: 500ms; /* Easings */ --ease-soft: cubic-bezier(0.32, 0.08, 0.24, 1); --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --transition-colors: color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft); --transition-transform: transform var(--dur-base) var(--ease-bounce); } /* ---- base / reset (ported from tokens/base.css) ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background-color: var(--color-bg); color: var(--text-body); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text-strong); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 0.5em; } p { margin: 0 0 1em; } code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; } ::selection { background: var(--clay-100); color: var(--ink-900); } /* ---- page-level chrome (ported from the design's own