/* ========================================================= Natugenic Design System — Tokens Warm studio paper with champagne gold and charcoal accents. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700&family=Inter:wght@400;500;600;700&family=Archivo:wght@700;800;900&display=swap'); :root { /* ---------- Color — raw scales ---------- */ /* Paper / cool neutrals — etalase base */ --paper: #F4F4F2; /* soft studio white */ --paper-2: #EAEAE7; /* inset card, day chip */ --paper-3: #DCDBD6; /* hairline on paper */ --card: #FFFFFF; /* Ink / warm greys — studio charcoal */ --ink: #1A1A1C; /* primary text */ --ink-2: #3F3F44; /* secondary text */ --ink-3: #7A7A80; /* tertiary / meta */ --ink-4: #B4B4B8; /* disabled */ --line: #E6E5E1; /* 1px border on paper */ --line-cool: #ECECEA; /* 1px border on white */ /* Brand — champagne gold + ink slab (from packaging caps + banners) */ --gold-100: #F6EFDF; --gold-200: #EBDDB6; --gold-400: #D2B778; /* champagne cap mid */ --gold-500: #B89654; /* champagne cap deep */ --gold-700: #8C6E37; --slab-500: #6F6C67; /* ink-slab banner (Shopee etalase) */ --slab-700: #4A4844; /* Legacy aliases kept so existing previews keep working */ --lav-100: var(--gold-100); --lav-200: var(--gold-200); --lav-300: var(--gold-400); --lav-500: var(--gold-500); --lav-700: var(--gold-700); --ind-500: var(--slab-500); --ind-600: var(--slab-700); --ind-700: var(--ink); /* Warmth — rose nude used in Moist lid accents */ --sakura-100: #F6EEEA; --sakura-200: #E9D8D0; --sakura-400: #C79C88; /* Botanical — muted olive/sage. Success, quiet. */ --bot-100: #ECEDE2; /* sage paper */ --bot-500: #7E8A5C; /* olive mid */ --bot-600: #5E6A42; /* olive deep */ --bot-700: #404A2C; /* Clay — warm terracotta tuned to gold family. Warning. */ --clay-100: #F5E6DA; --clay-400: #C79273; /* restrained terracotta */ --clay-600: #8E5E3E; /* Sky — steel blue, low chroma. Info. */ --sky-100: #E6ECEE; --sky-500: #6E8A99; /* studio steel */ --sky-700: #3E5968; /* Rouge — warm crimson, not red-red. Danger. */ --rouge-100: #F3DEDA; --rouge-500: #B2564A; --rouge-700: #7E3A31; /* ---------- Semantic ---------- */ --bg: var(--paper); --fg1: var(--ink); --fg2: var(--ink-2); --fg3: var(--ink-3); --fg-disabled: var(--ink-4); --surface: var(--card); --surface-sunk: var(--paper-2); --border: var(--line-cool); --border-paper: var(--line); --accent: var(--gold-500); --accent-2: var(--ink); --success: var(--bot-600); --warning: var(--clay-600); --info: var(--sky-700); --danger: var(--rouge-500); --focus-ring: var(--gold-500); /* ---------- Gradients ---------- */ --grad-primary: linear-gradient(135deg, var(--ink) 0%, var(--slab-700) 100%); --grad-gold: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-500) 100%); --grad-primary-soft: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-700) 100%); --grad-mascot: radial-gradient(closest-side, var(--gold-400) 0%, var(--gold-100) 55%, transparent 75%); --grad-page: radial-gradient(120% 60% at 50% 0%, #FAFAF8 0%, transparent 55%), var(--paper); --grad-score: linear-gradient(90deg, var(--gold-400), var(--ink)); /* ---------- Typography ---------- */ --font-display: 'Fraunces', 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-numeric: 'Archivo', 'Inter', system-ui, sans-serif; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.55; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* ---------- Spacing ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ---------- Radius ---------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 9999px; /* ---------- Shadow ---------- */ --shadow-card: 0 10px 30px -12px rgba(15, 17, 23, 0.08), 0 2px 6px -2px rgba(15, 17, 23, 0.04); --shadow-raised: 0 14px 32px -10px rgba(26, 26, 28, 0.35), 0 2px 4px rgba(26, 26, 28, 0.10); --shadow-soft: 0 6px 18px -8px rgba(15, 17, 23, 0.10); --shadow-chip: 0 1px 2px rgba(15, 17, 23, 0.04), 0 4px 14px -6px rgba(15, 17, 23, 0.06); --shadow-press: inset 0 0 0 9999px rgba(15, 17, 23, 0.04); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 0.8, 0.4); --dur-xs: 120ms; --dur-sm: 180ms; --dur-md: 260ms; --dur-lg: 420ms; } /* ========================================================= Semantic element styles — drop-in classes ========================================================= */ body { font-family: var(--font-body); color: var(--fg1); background: var(--bg); font-size: var(--fs-16); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .h1, h1.ds { font-family: var(--font-display); font-size: var(--fs-40); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg1); text-wrap: balance; } .h1 em, h1.ds em { font-style: italic; font-weight: 700; } .h2, h2.ds { font-family: var(--font-display); font-size: var(--fs-28); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg1); } .h3, h3.ds { font-family: var(--font-body); font-size: var(--fs-18); font-weight: 700; line-height: var(--lh-snug); color: var(--fg1); } .label { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg3); } .p, p.ds { font-family: var(--font-body); font-size: var(--fs-15); line-height: var(--lh-body); color: var(--fg2); } .meta { font-family: var(--font-body); font-size: var(--fs-13); color: var(--fg3); } .num { font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--accent-2); letter-spacing: var(--tracking-tight); }