/* * Seedance template - design tokens * Loaded before seedance.css. All component CSS reads vars from :root. */ :root { /* Color: light theme */ --color-bg: #ffffff; --color-fg: #0a0a0a; --color-muted: #fafafa; --color-muted-fg: #71717b; --color-card: #ffffff; --color-card-fg: #0a0a0a; --color-border: #e5e5e5; --color-input: #e5e5e5; --color-ring: #6466F1; /* Brand */ --color-primary: #6466F1; --color-primary-fg: #ffffff; --color-primary-soft: #eeedfd; --color-accent: #fb923c; --color-accent-amber: #fbbf24; --color-accent-yellow: #facc15; /* CTA gradient (orange -> amber) used on hero CTA + announcement bar */ --color-cta-from: #fb923c; --color-cta-to: #f59e0b; --color-cta-pink: #ec4899; --color-cta-purple: #a855f7; /* Status */ --color-success: #0ac864; --color-warning: #f59e0b; --color-danger: #ef4444; /* Radius */ --radius-sm: 4px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; /* Spacing scale (used by components) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Typography */ --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.5); --shadow-cta: 0 4px 15px -3px rgba(249, 115, 22, 0.4), 0 0 20px -5px rgba(239, 68, 68, 0.3); /* Layout */ --container-max: 1280px; --header-height: 64px; --announcement-height: 36px; } /* Dark theme. 1. Honor OS dark preference when user has NOT explicitly chosen a theme. 2. Allow explicit override via [data-theme="dark"] / [data-theme="light"] on , set by the theme-toggle button in core.js. */ [data-theme="dark"] { --color-bg: #0a0a0a; --color-fg: #fafafa; --color-muted: #141414; --color-muted-fg: #a1a1aa; --color-card: #141414; --color-card-fg: #fafafa; --color-border: #262626; --color-input: #262626; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0a0a0a; --color-fg: #fafafa; --color-muted: #141414; --color-muted-fg: #a1a1aa; --color-card: #141414; --color-card-fg: #fafafa; --color-border: #262626; --color-input: #262626; } }