/* ========================================================================== * Cutta Design System v1 * ========================================================================== * Aesthetic direction: editorial-refined dark with warm rouge accent. * Influences: Linear (motion), Stripe Dashboard (typography), Frame.io * (density), Apple iCloud (depth). Distinctly NOT generic SaaS blue/purple. * * Tokens are CSS custom properties on :root + [data-theme="light"]. All * components consume tokens — no hardcoded colors anywhere downstream. * ========================================================================== */ /* ---------- Fonts (system + variable + display serif for editorial feel) -- */ /* ---------- Fonts: 本地自托管 woff2(latin/latin-ext/vietnamese 子集;Geist / Geist Mono / Fraunces 变量;原样保留 Google 的 font-weight/unicode-range/display,仅 src 指向本地 /fonts) */ /* vietnamese */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/fraunces-300-700-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/fraunces-300-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/fraunces-300-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/geist-300-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/geist-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/geist-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-400-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-500-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-600-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/geist-700-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/geist-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/geist-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/geist-800-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/geist-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/geist-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 900; font-display: swap; src: url(/fonts/geist-900-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 900; font-display: swap; src: url(/fonts/geist-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 900; font-display: swap; src: url(/fonts/geist-900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-400-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-500-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-mono-600-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-mono-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-mono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ─────── Type Stacks ───────────────────────────────────────────────── */ --cutta-font-sans: "Geist", "Inter Variable", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif; --cutta-font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, "Courier New", monospace; --cutta-font-display: "Fraunces", "Source Han Serif SC", "Songti SC", "Times New Roman", Georgia, serif; /* editorial display for hero & big numerals */ /* ─────── Type Scale (1.250 minor third + UI essentials) ─────────────── */ --cutta-text-2xs: 11px; /* badges, micro labels */ --cutta-text-xs: 12px; /* meta, captions */ --cutta-text-sm: 13px; /* table cells, sub */ --cutta-text-md: 14px; /* default body UI */ --cutta-text-base:15px; /* paragraph body */ --cutta-text-lg: 16px; /* card title */ --cutta-text-xl: 18px; /* section title */ --cutta-text-2xl: 22px; /* page subtitle */ --cutta-text-3xl: 28px; /* page title */ --cutta-text-4xl: 36px; /* hero secondary */ --cutta-text-5xl: 48px; /* hero primary */ --cutta-text-6xl: 64px; /* display rare */ --cutta-leading-tight: 1.18; /* big numerals & display */ --cutta-leading-snug: 1.32; /* headings */ --cutta-leading-base: 1.5; /* UI */ --cutta-leading-loose: 1.65; /* long-form */ --cutta-tracking-tight: -0.02em; --cutta-tracking-display: -0.035em; --cutta-tracking-uppercase: 0.08em; --cutta-weight-regular: 400; --cutta-weight-medium: 500; --cutta-weight-semibold:600; /* ─────── Spacing — 4 px base, no odd numbers ─────────────────────────── */ --cutta-space-0: 0; --cutta-space-1: 4px; --cutta-space-2: 8px; --cutta-space-3: 12px; --cutta-space-4: 16px; --cutta-space-5: 20px; --cutta-space-6: 24px; --cutta-space-8: 32px; --cutta-space-10: 40px; --cutta-space-12: 48px; --cutta-space-16: 64px; --cutta-space-20: 80px; --cutta-space-24: 96px; /* ─────── Radius ────────────────────────────────────────────────────── */ --cutta-radius-xs: 4px; --cutta-radius-sm: 6px; --cutta-radius-md: 8px; --cutta-radius-lg: 12px; --cutta-radius-xl: 16px; --cutta-radius-2xl: 20px; --cutta-radius-pill: 9999px; /* ─────── Motion: Linear-grade easing + durations ─────────────────────── */ --cutta-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Linear's signature */ --cutta-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --cutta-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* gentle overshoot */ --cutta-dur-micro: 100ms; /* hover bg */ --cutta-dur-short: 180ms; /* small expand */ --cutta-dur-medium: 280ms; /* card / drawer */ --cutta-dur-long: 420ms; /* page transitions */ --cutta-dur-stagger: 30ms; /* per-item list reveal */ /* ─────── Z-index scale ───────────────────────────────────────────────── */ --cutta-z-base: 0; --cutta-z-raised: 10; --cutta-z-sticky: 100; --cutta-z-overlay: 800; --cutta-z-modal: 900; --cutta-z-toast: 1000; /* ─────── Border widths ───────────────────────────────────────────────── */ --cutta-border-hair: 0.5px; --cutta-border-thin: 1px; } /* =================================================================== * Theme: DARK (default) — editorial deep ink with warm rouge accent * =================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Neutral 9-stop scale (50 lightest → 950 darkest, but for dark theme we use these as "ink" and reverse mental model) */ --cutta-neutral-50: #FAFAF7; --cutta-neutral-100: #ECECE6; --cutta-neutral-200: #C7C7BE; --cutta-neutral-300: #9B9B92; --cutta-neutral-400: #6E6E66; --cutta-neutral-500: #4F4F49; --cutta-neutral-600: #38383334; --cutta-neutral-700: #2A2A26; --cutta-neutral-800: #1B1B18; --cutta-neutral-900: #121211; --cutta-neutral-950: #08080A; /* Surface layers (Wave 4: lift from pure black to deep charcoal — #08 felt too dead under sustained viewing; #0a reads warmer and gives surface-1/2/3 better separation in low-light). */ --cutta-bg: #0A0A0C; /* page */ --cutta-bg-1: #101013; /* card */ --cutta-bg-2: #16161B; /* elevated card */ --cutta-bg-3: #1D1D23; /* popover / overlay base */ --cutta-bg-inset: #060608; /* inset (code, well) */ /* Foreground / ink */ --cutta-ink: #F5F5F0; /* primary text */ --cutta-ink-2: #C9C9C2; /* secondary text */ --cutta-ink-3: #8E8E86; /* tertiary text */ --cutta-ink-4: #5A5A52; /* disabled / placeholder */ --cutta-ink-5: #3A3A34; /* dividers as ink */ /* Lines & dividers */ --cutta-line: rgba(245, 245, 240, 0.06); --cutta-line-2: rgba(245, 245, 240, 0.10); --cutta-line-3: rgba(245, 245, 240, 0.16); --cutta-line-strong: rgba(245, 245, 240, 0.28); /* Brand accent — warm rouge. Wave 4: dropped from #E26A4A → #D5604A (saturation -8%) for sustained dark-mode comfort. Accent-soft still bright for tags / hovers. */ --cutta-accent: #D5604A; /* warm terracotta-rouge (calmed) */ --cutta-accent-soft: #F2A085; --cutta-accent-strong: #B5482F; --cutta-accent-tint: rgba(213, 96, 74, 0.14); --cutta-accent-glow: rgba(213, 96, 74, 0.30); --cutta-accent-ink: #FFFFFF; /* foreground when on accent */ /* Secondary accent — deep aged-bronze (for premium / data viz contrast) */ --cutta-bronze: #B89469; --cutta-bronze-soft: #D4B58F; /* Semantic */ --cutta-success: #4ADE80; --cutta-success-soft: rgba(74, 222, 128, 0.16); --cutta-warning: #F59E0B; --cutta-warning-soft: rgba(245, 158, 11, 0.16); --cutta-danger: #EF4444; --cutta-danger-soft: rgba(239, 68, 68, 0.16); --cutta-info: #60A5FA; --cutta-info-soft: rgba(96, 165, 250, 0.16); /* Data-viz palette (carefully sequenced for distinguishable categories) */ --cutta-viz-1: #E26A4A; /* rouge */ --cutta-viz-2: #B89469; /* bronze */ --cutta-viz-3: #4ADE80; /* mint */ --cutta-viz-4: #60A5FA; /* azure */ --cutta-viz-5: #C084FC; /* lilac */ --cutta-viz-6: #F59E0B; /* amber */ --cutta-viz-7: #FB7185; /* rose */ --cutta-viz-8: #5EEAD4; /* teal */ /* Layered shadows — multiple soft layers, no blunt black */ --cutta-shadow-xs: 0 1px 2px rgba(0,0,0,0.36); --cutta-shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 0 1px rgba(0,0,0,0.20); --cutta-shadow-md: 0 2px 4px rgba(0,0,0,0.32), 0 6px 12px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04); --cutta-shadow-lg: 0 6px 14px rgba(0,0,0,0.38), 0 14px 36px rgba(0,0,0,0.30), 0 0 0 0.5px rgba(255,255,255,0.06); --cutta-shadow-xl: 0 16px 32px rgba(0,0,0,0.42), 0 32px 60px rgba(0,0,0,0.36), 0 0 0 0.5px rgba(255,255,255,0.06); --cutta-shadow-glow: 0 0 0 4px var(--cutta-accent-tint), 0 8px 24px var(--cutta-accent-glow); --cutta-shadow-inset: inset 0 0 0 1px var(--cutta-line); /* Backdrops */ --cutta-backdrop-blur: saturate(1.1) blur(14px); --cutta-overlay-bg: rgba(8, 8, 10, 0.72); /* Focus ring */ --cutta-focus-ring: 0 0 0 2px var(--cutta-bg), 0 0 0 4px var(--cutta-accent); } /* =================================================================== * Theme: LIGHT — refined off-white with same warm rouge accent * =================================================================== */ :root[data-theme="light"] { color-scheme: light; --cutta-bg: #FAFAF7; --cutta-bg-1: #FFFFFF; --cutta-bg-2: #F5F4EE; --cutta-bg-3: #ECECE6; --cutta-bg-inset: #F0EFE9; --cutta-ink: #1A1A18; --cutta-ink-2: #4F4F49; --cutta-ink-3: #74746C; --cutta-ink-4: #A09F95; --cutta-ink-5: #C7C7BE; --cutta-line: rgba(26, 26, 24, 0.07); --cutta-line-2: rgba(26, 26, 24, 0.10); --cutta-line-3: rgba(26, 26, 24, 0.16); --cutta-line-strong: rgba(26, 26, 24, 0.28); --cutta-accent: #C24A2D; --cutta-accent-soft: #E26A4A; --cutta-accent-strong: #962812; --cutta-accent-tint: rgba(194, 74, 45, 0.10); --cutta-accent-glow: rgba(194, 74, 45, 0.22); --cutta-accent-ink: #FFFFFF; --cutta-bronze: #8B6E4F; --cutta-bronze-soft: #B89469; --cutta-success: #16A34A; --cutta-success-soft: rgba(22, 163, 74, 0.14); --cutta-warning: #D97706; --cutta-warning-soft: rgba(217, 119, 6, 0.14); --cutta-danger: #DC2626; --cutta-danger-soft: rgba(220, 38, 38, 0.14); --cutta-info: #2563EB; --cutta-info-soft: rgba(37, 99, 235, 0.14); --cutta-shadow-xs: 0 1px 2px rgba(15, 15, 12, 0.05); --cutta-shadow-sm: 0 1px 2px rgba(15, 15, 12, 0.06), 0 1px 3px rgba(15, 15, 12, 0.04); --cutta-shadow-md: 0 2px 4px rgba(15, 15, 12, 0.06), 0 8px 16px rgba(15, 15, 12, 0.06), 0 0 0 0.5px rgba(15, 15, 12, 0.04); --cutta-shadow-lg: 0 6px 14px rgba(15, 15, 12, 0.10), 0 18px 40px rgba(15, 15, 12, 0.08), 0 0 0 0.5px rgba(15, 15, 12, 0.06); --cutta-shadow-xl: 0 16px 32px rgba(15, 15, 12, 0.12), 0 36px 64px rgba(15, 15, 12, 0.10), 0 0 0 0.5px rgba(15, 15, 12, 0.06); --cutta-shadow-glow: 0 0 0 4px var(--cutta-accent-tint), 0 8px 24px var(--cutta-accent-glow); --cutta-overlay-bg: rgba(20, 20, 16, 0.40); --cutta-focus-ring: 0 0 0 2px var(--cutta-bg), 0 0 0 4px var(--cutta-accent); } /* =================================================================== * Reset / base * =================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "ss02", "cv11", "tnum"; } body { margin: 0; background: var(--cutta-bg); color: var(--cutta-ink); font-family: var(--cutta-font-sans); font-size: var(--cutta-text-md); line-height: var(--cutta-leading-base); font-weight: var(--cutta-weight-regular); min-height: 100vh; /* Ambient grain to break up flat surfaces */ background-image: radial-gradient(1200px 600px at 80% -10%, rgba(226, 106, 74, 0.06), transparent 60%), radial-gradient(900px 500px at 5% 110%, rgba(184, 148, 105, 0.04), transparent 60%); background-attachment: fixed; transition: background-color var(--cutta-dur-medium) var(--cutta-ease-out), color var(--cutta-dur-medium) var(--cutta-ease-out); } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } img, svg { display: block; max-width: 100%; } table { border-collapse: collapse; } /* =================================================================== * Utility classes (used by components but also page-level) * =================================================================== */ .cutta-mono { font-family: var(--cutta-font-mono); font-feature-settings: "tnum"; } .cutta-tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .cutta-display { font-family: var(--cutta-font-display); letter-spacing: var(--cutta-tracking-display); font-weight: var(--cutta-weight-medium); } .cutta-uppercase { text-transform: uppercase; letter-spacing: var(--cutta-tracking-uppercase); font-size: var(--cutta-text-xs); color: var(--cutta-ink-3); } .cutta-ink { color: var(--cutta-ink); } .cutta-ink-2 { color: var(--cutta-ink-2); } .cutta-ink-3 { color: var(--cutta-ink-3); } .cutta-ink-4 { color: var(--cutta-ink-4); } .cutta-pos { color: var(--cutta-success); } .cutta-neg { color: var(--cutta-danger); } /* Custom thin scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--cutta-line-2); border-radius: var(--cutta-radius-pill); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--cutta-line-3); background-clip: padding-box; } * { scrollbar-width: thin; scrollbar-color: var(--cutta-line-2) transparent; } /* Selection */ ::selection { background: var(--cutta-accent-tint); color: var(--cutta-ink); } /* Reduce motion (a11y) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Focus ring (consistent across components) */ :focus-visible { outline: 0; box-shadow: var(--cutta-focus-ring); border-radius: var(--cutta-radius-sm); } /* =================================================================== * Keyframes (shared library) * =================================================================== */ @keyframes cutta-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes cutta-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes cutta-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } @keyframes cutta-spin { to { transform: rotate(360deg); } } @keyframes cutta-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes cutta-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes cutta-spring-in { 0% { opacity: 0; transform: scale(0.92); } 60% { opacity: 1; transform: scale(1.02); } 100% { transform: scale(1); } } /* =================================================================== * Page-enter helper (applied on ) * =================================================================== */ /* Whitelist only structural top-level children. The previous `> *` * applied animation-fill-mode:both to every body child — including * .c-drawer / .c-overlay / .c-modal / .c-toast-host / .cutta-cmdk that * rely on transform/opacity being their default state. That caused * empty drawers + overlays to flash visible on page load. */ [data-cutta-page] > main, [data-cutta-page] > section, [data-cutta-page] > header, [data-cutta-page] > footer, [data-cutta-page] > nav, [data-cutta-page] > .c-page-enter { animation: cutta-fade-in var(--cutta-dur-medium) var(--cutta-ease-out) both; } /* Opt-out for elements that should never animate on page enter. */ .no-page-anim { animation: none !important; } /* === 第三刀·自动晋升 token === */ :root { --cutta-amber-400: #fbbf24; --cutta-amber-800-a20: rgba(146,64,14,.20); --cutta-black-a02: rgba(0,0,0,.02); --cutta-black-a03: rgba(0,0,0,.03); --cutta-black-a04: rgba(0,0,0,.04); --cutta-black-a06: rgba(0,0,0,.06); --cutta-black-a08: rgba(0,0,0,.08); --cutta-black-a4: rgba(0,0,0,.4); --cutta-black-a6: rgba(0,0,0,.6); --cutta-black-a7: rgba(0,0,0,.7); --cutta-blue-800-a22: rgba(30,64,175,.22); --cutta-c-07070b: #07070b; --cutta-c-0d0d13: #0d0d13; --cutta-c-10d97a: #10d97a; --cutta-c-10d97a-a1: rgba(16,217,122,.1); --cutta-c-10d97a-a15: rgba(16,217,122,.15); --cutta-c-13131b: #13131b; --cutta-c-1a1a1a: #1a1a1a; --cutta-c-1a1a24: #1a1a24; --cutta-c-52525b: #52525b; --cutta-c-555555: #555555; --cutta-c-71717a: #71717a; --cutta-c-7a7a86: #7a7a86; --cutta-c-888888: #888888; --cutta-c-a0392f: #a0392f; --cutta-c-b4b4be: #b4b4be; --cutta-c-c4b5fd: #c4b5fd; --cutta-c-c81e1e: #c81e1e; --cutta-c-e54338: #e54338; --cutta-c-e8e5de: #e8e5de; --cutta-c-f43f5e: #f43f5e; --cutta-c-f43f5e-a1: rgba(244,63,94,.1); --cutta-c-f43f5e-a15: rgba(244,63,94,.15); --cutta-c-f43f5e-a3: rgba(244,63,94,.3); --cutta-c-fca5a5: #fca5a5; --cutta-c-ff0057: #ff0057; --cutta-c-ff4d3d: #ff4d3d; --cutta-c-ff4d3d-a04: rgba(255,77,61,.04); --cutta-c-ff4d3d-a06: rgba(255,77,61,.06); --cutta-c-ff4d3d-a08: rgba(255,77,61,.08); --cutta-c-ff4d3d-a10: rgba(255,77,61,.10); --cutta-c-ff4d3d-a12: rgba(255,77,61,.12); --cutta-c-ff4d3d-a15: rgba(255,77,61,.15); --cutta-c-ff4d3d-a18: rgba(255,77,61,.18); --cutta-c-ff4d3d-a3: rgba(255,77,61,.3); --cutta-c-ff4d3d-a4: rgba(255,77,61,.4); --cutta-c-ff6b6b: #ff6b6b; --cutta-c-ff6b6b-a05: rgba(255, 107, 107, .05); --cutta-green-500: #22c55e; --cutta-green-800-a18: rgba(22,101,52,.18); --cutta-red-400: #f87171; --cutta-red-800-a20: rgba(153,27,27,.20); --cutta-violet-500: #8b5cf6; --cutta-violet-500-a06: rgba(139,92,246,.06); --cutta-violet-500-a08: rgba(139,92,246,.08); --cutta-violet-500-a2: rgba(139,92,246,.2); --cutta-white-a06: rgba(255,255,255,.06); --cutta-white-a14: rgba(255,255,255,.14); --cutta-white-a8: rgba(255,255,255,.8); }