/* ============================================================ Chill Company — Design Tokens Single source of truth for color, type, spacing, motion. ============================================================ */ :root { /* ---- Brand color ---------------------------------------- */ --color-chill-blue: #83BDEC; /* Primary */ --color-deep-chill: #549FE2; /* Secondary */ --color-warmth: #F9EB8A; /* Accent · soft */ --color-honest: #F7BEB6; /* Accent · empathy */ /* ---- Surfaces · Light mode (default) -------------------- */ --bg-primary: #FFFFFF; --bg-elevated: #F8FAFD; --bg-soft: #EEF4FB; --text-primary: #0E1320; --text-muted: #5A6478; --text-soft: #8A93A6; --line: rgba(14, 19, 32, 0.10); --line-soft: rgba(14, 19, 32, 0.06); /* CTA / focus */ --accent: var(--color-chill-blue); --accent-hover: var(--color-deep-chill); --focus-ring: rgba(131, 189, 236, 0.45); /* ---- Typography ----------------------------------------- */ --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif; --font-serif: "Playfair Display", "Noto Serif TC", Georgia, serif; --font-han: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", var(--font-sans); --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", var(--font-sans); --font-jp-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", var(--font-serif); --text-display: 80px; --text-h1: 56px; --text-h2: 40px; --text-h3: 28px; --text-h4: 20px; --text-body-lg: 20px; --text-body: 16px; --text-small: 14px; --text-micro: 12px; --lh-display: 0.98; --lh-h1: 1.05; --lh-h2: 1.1; --lh-h3: 1.2; --lh-h4: 1.3; --lh-body-lg: 1.6; --lh-body: 1.65; --lh-small: 1.55; --lh-micro: 1.4; --tracking-micro: 0.18em; --tracking-tight: -0.01em; /* ---- Spacing -------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px; --space-10: 192px; /* ---- Radii ---------------------------------------------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 36px; --radius-pill: 999px; /* ---- Layout --------------------------------------------- */ --container: 1200px; --gutter: 24px; /* ---- Motion --------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 240ms; --dur: 480ms; --dur-slow: 700ms; /* ---- Shadow (used very sparingly) ----------------------- */ --shadow-soft: 0 16px 48px -16px rgba(14, 19, 32, 0.12); --shadow-card: 0 2px 8px rgba(14, 19, 32, 0.04), 0 24px 64px -24px rgba(14, 19, 32, 0.10); } /* ---- Desktop type bump ------------------------------------ */ @media (min-width: 1024px) { :root { --gutter: 40px; } } /* ---- Mobile type scale-down ------------------------------- */ @media (max-width: 1023px) { :root { --text-display: 56px; --text-h1: 40px; --text-h2: 30px; --text-h3: 24px; } } @media (max-width: 639px) { :root { --text-display: 44px; --text-h1: 32px; --text-h2: 26px; --text-h3: 22px; } } /* ============================================================ STILL — Dark mode (product-scoped, NOT global) Activated via Chill Blue replaces gold as the accent (per brand v1.2). ============================================================ */ [data-theme="dark"] { --bg-primary: #05060A; --bg-elevated: #0B0D14; --bg-soft: rgba(255, 255, 255, 0.05); --text-primary: #F7F3EA; --text-muted: #B9B2A5; --text-soft: #8A8474; --line: rgba(255, 255, 255, 0.14); --line-soft: rgba(255, 255, 255, 0.06); --accent: var(--color-chill-blue); --accent-hover: #A8D1F2; --accent-glow: #90B8FF; --focus-ring: rgba(131, 189, 236, 0.55); --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4), 0 24px 64px -24px rgba(0, 0, 0, 0.7); }