/* ========================================================================= FULLDOT — Design Tokens 依 JR Lai Personal CIS Manual EDITION 2.0 Color 60/30/10 · Typography Cormorant + Noto Serif TC + Inter + JBMono ========================================================================= */ :root { /* ── Color Primitives ─────────────────────────────────────────────── */ --ink: #0A1F3D; /* Pantone 539 C — 60% */ --ink-glow: #14305A; /* hover / lifted ink */ --ink-90: #1A2D4D; --ink-70: #3D4F6D; --ink-50: #6A7891; --paper: #F5F1E8; /* Pantone Warm Gray 1 C — 30% */ --paper-cream: #FBF7EE; /* lighter highlight surface */ --paper-warm: #EDE7D8; --paper-deep: #E5DCC5; --bronze: #8A6F3F; /* Pantone 4505 C — primary accent */ --bronze-light: #A88857; --bronze-deep: #6F5731; --copper-glow: #C89B6C; /* NEW — interactive highlight */ --copper-bright: #DAB382; /* NEW — hover spark */ --sage: #6B7A5A; /* Pantone 5777 C — secondary accent */ --sage-light: #869578; --sage-deep: #525F45; /* NEW — 跨受眾活力輔色 */ --coral: #E89F71; /* Soft Coral — 暖能量、友善、年輕 */ --coral-light: #F2B68E; --coral-deep: #C77E51; --teal: #3E8E7E; /* Aurora Teal — 清新、信任、現代 */ --teal-light: #6FB2A4; --teal-deep: #2D6A5E; --ink-rgb: 10, 31, 61; --paper-rgb: 245, 241, 232; --bronze-rgb: 138, 111, 63; --copper-rgb: 200, 155, 108; --sage-rgb: 107, 122, 90; --coral-rgb: 232, 159, 113; --teal-rgb: 62, 142, 126; /* ── Gradient tokens (for richer surfaces) ────────────────────────── */ --grad-hero: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(var(--copper-rgb), 0.28), transparent 60%), radial-gradient(ellipse 70% 50% at 80% 70%, rgba(var(--teal-rgb), 0.22), transparent 60%), linear-gradient(135deg, #0A1F3D 0%, #14305A 100%); --grad-bronze: linear-gradient(135deg, var(--bronze) 0%, var(--copper-glow) 100%); --grad-bronze-soft: linear-gradient(135deg, rgba(var(--bronze-rgb), 0.08) 0%, rgba(var(--copper-rgb), 0.08) 100%); --grad-paper: linear-gradient(180deg, var(--paper-cream) 0%, var(--paper) 100%); --grad-card: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%); /* NEW — 活力漸層（Sunset / Aurora / Dawn） */ --grad-sunset: linear-gradient(135deg, var(--bronze) 0%, var(--coral) 50%, var(--copper-glow) 100%); --grad-sunset-soft: linear-gradient(135deg, rgba(var(--bronze-rgb), 0.12) 0%, rgba(var(--coral-rgb), 0.10) 50%, rgba(var(--copper-rgb), 0.08) 100%); --grad-aurora: linear-gradient(135deg, var(--ink-glow) 0%, var(--teal) 60%, var(--sage) 100%); --grad-aurora-soft: linear-gradient(135deg, rgba(var(--ink-rgb), 0.06) 0%, rgba(var(--teal-rgb), 0.10) 60%, rgba(var(--sage-rgb), 0.06) 100%); --grad-dawn: linear-gradient(180deg, var(--paper-cream) 0%, var(--paper) 50%, rgba(var(--copper-rgb), 0.05) 100%); --grad-coral: linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%); --grad-teal: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%); /* ── Semantic Colors ──────────────────────────────────────────────── */ --color-bg: var(--paper); --color-bg-alt: var(--paper-warm); --color-bg-deep: var(--paper-deep); --color-bg-invert: var(--ink); --color-text: var(--ink); --color-text-muted: var(--ink-70); --color-text-soft: var(--ink-50); --color-text-invert: var(--paper); --color-accent: var(--bronze); --color-accent-soft: var(--bronze-light); --color-secondary: var(--sage); --color-border: rgba(var(--ink-rgb), 0.12); --color-border-strong:rgba(var(--ink-rgb), 0.2); /* ── Typography ───────────────────────────────────────────────────── */ /* Fraunces 排前：負責拉丁字母與「數字」的書卷感 + 自信 後接 Cormorant Garamond 作為 latin 古典 fallback CJK 自動 fallback 到 Noto Serif TC */ --font-display: "Fraunces", "Cormorant Garamond", "Noto Serif TC", Georgia, serif; --font-serif: "Noto Serif TC", "Source Han Serif TC", Georgia, serif; --font-num: "Fraunces", "Cormorant Garamond", "Noto Serif TC", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Type Scale (CIS 7.1 規範) */ --fs-display-1: clamp(3.5rem, 6vw + 1rem, 6rem); /* 56–96px */ --fs-display-2: clamp(2.75rem, 4vw + 1rem, 4rem); /* 44–64px */ --fs-h1: clamp(2.25rem, 3vw + 1rem, 3.5rem); /* 36–56px */ --fs-h2: clamp(1.75rem, 2vw + 1rem, 2.5rem); /* 28–40px */ --fs-h3: 1.5rem; /* 24px */ --fs-h4: 1.25rem; /* 20px */ --fs-body: 1rem; /* 16px */ --fs-body-lg: 1.125rem; /* 18px */ --fs-small: 0.875rem; /* 14px */ --fs-caption: 0.6875rem; /* 11px */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.7; --lh-loose: 1.9; --tracking-display: -0.025em; --tracking-caption: 0.18em; --tracking-label: 0.12em; /* ── Spacing (8pt baseline grid) ──────────────────────────────────── */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 3rem; /* 48px */ --space-6: 4rem; /* 64px */ --space-7: 6rem; /* 96px */ --space-8: 8rem; /* 128px */ --space-9: 10rem; /* 160px */ /* ── Layout ───────────────────────────────────────────────────────── */ --container: 1280px; --container-narrow: 880px; --container-prose: 680px; --gutter-d: 24px; --gutter-m: 16px; --outer-d: 56px; --outer-m: 24px; --columns-d: 12; --columns-m: 4; /* ── Radius ───────────────────────────────────────────────────────── */ --radius-sm: 2px; --radius: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ── Shadow（節制使用、紙感為主、層次更精緻）─────────────────────── */ --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), 0.06); --shadow: 0 2px 8px rgba(var(--ink-rgb), 0.08), 0 1px 2px rgba(var(--ink-rgb), 0.04); --shadow-md: 0 8px 24px rgba(var(--ink-rgb), 0.10), 0 2px 4px rgba(var(--ink-rgb), 0.06); --shadow-lg: 0 24px 56px rgba(var(--ink-rgb), 0.14), 0 4px 8px rgba(var(--ink-rgb), 0.06); --shadow-glow: 0 8px 32px rgba(var(--copper-rgb), 0.28), 0 2px 8px rgba(var(--bronze-rgb), 0.18); --shadow-card: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 3px rgba(var(--ink-rgb), 0.08), 0 8px 24px -8px rgba(var(--ink-rgb), 0.12); /* ── Motion ───────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-emph: cubic-bezier(0.83, 0, 0.17, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */ --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); /* most refined */ --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-emph: 820ms; /* ── Z-index ──────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-nav: 200; --z-modal: 1000; --z-toast: 2000; } /* Reduce motion ─ accessibility */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-emph: 0ms; } }