/* ============================================================
抱毛 Aromatic Pet — Colors & Type Foundations
Natural, gentle, apothecary-grade pet skincare brand (Taiwan)
Import this file + the Google Fonts link below into any design.
============================================================ */
/* --- Webfonts (Google Fonts) ---------------------------------
------------------------------------------------------------- */
:root {
/* ---------- Brand Color Palette ---------- */
/* Backgrounds — warm paper / cream */
--bg-base: #FAF4E9; /* primary page background, soft cream */
--bg-subtle: #F3E9D6; /* secondary surface, sand */
--bg-card: #FFFFFF; /* clean card / product field */
/* Ink — earthy text */
--ink: #3B342B; /* primary text, ink-brown */
--ink-soft: #857966; /* secondary text, grey-brown */
--ink-faint: #B6AB97; /* tertiary / placeholder, faded taupe */
/* Product accents */
--clay: #C2714A; /* 乾洗澡慕斯 — terracotta / clay red */
--clay-deep: #A85B38; /* clay pressed / hover */
--clay-tint: #EFD9CB; /* clay wash background */
--sage: #8C9B5E; /* 洗毛精 — sage green */
--sage-deep: #74844A; /* sage pressed / hover */
--sage-tint: #DDE2C9; /* sage wash background */
/* Highlight / metallic */
--gold: #E0A33D; /* gold-yellow accent, badges, dots */
--gold-deep: #C4882A; /* gold pressed */
--gold-tint: #F6E6C4; /* gold wash background */
/* Hairlines */
--line: #E6DCC8; /* default border on cream */
--line-strong: #D8CBB0; /* stronger divider */
/* ---------- Semantic color roles ---------- */
--color-fg: var(--ink);
--color-fg-muted: var(--ink-soft);
--color-fg-faint: var(--ink-faint);
--color-bg: var(--bg-base);
--color-bg-alt: var(--bg-subtle);
--color-surface: var(--bg-card);
--color-border: var(--line);
--color-accent: var(--clay);
--color-accent-2: var(--sage);
--color-highlight: var(--gold);
/* ---------- Type families ---------- */
--font-display: "Cormorant Garamond", "Noto Serif TC", Georgia, serif; /* EN display / brand wordmark */
--font-serif-tc: "Noto Serif TC", "Songti TC", serif; /* CN headings */
--font-sans-tc: "Noto Sans TC", system-ui, "PingFang TC", sans-serif; /* body */
/* ---------- Logo / wordmark families ----------
Per brand direction: EN logo set in High Tower Text, CN logo in
微軟正黑體 (Microsoft JhengHei) Bold. Both are proprietary system fonts
(Windows / MS Office) and cannot be served from a webfont CDN — the
stacks below fall back gracefully where the fonts aren't installed. */
--font-logo-en: "High Tower Text", "Cormorant Garamond", Georgia, serif;
--font-logo-cn: "微軟正黑體", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
/* ---------- Type scale (desktop) ---------- */
--text-display: clamp(3rem, 6vw, 5rem); /* 80px hero EN wordmark */
--text-h1: 2.75rem; /* 44px */
--text-h2: 2rem; /* 32px */
--text-h3: 1.5rem; /* 24px */
--text-h4: 1.25rem; /* 20px */
--text-lead: 1.25rem; /* 20px intro paragraph */
--text-body: 1.0625rem; /* 17px */
--text-small: 0.9375rem; /* 15px */
--text-caption: 0.8125rem; /* 13px */
--text-eyebrow: 0.75rem; /* 12px label / eyebrow */
/* ---------- Weights ---------- */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semibold: 600;
--w-bold: 700;
/* ---------- Letter spacing ---------- */
--track-display: 0.08em; /* widened caps for EN display */
--track-eyebrow: 0.28em; /* eyebrow / label tracking */
--track-tc: 0.04em; /* CN heading air */
/* ---------- Line heights ---------- */
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-body: 1.85; /* generous, airy CN body */
/* ---------- Radii (soft rounded) ---------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--r-pill: 999px;
/* ---------- Spacing scale ---------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
/* ---------- Container ---------- */
--maxw: 1200px;
--gutter: clamp(20px, 5vw, 64px);
/* ---------- Motion (gentle, no bounce) ---------- */
--ease: cubic-bezier(0.33, 0, 0.2, 1);
--dur: 320ms;
}
/* ============================================================
Semantic element styles — apply with utility classes
============================================================ */
.eyebrow {
font-family: var(--font-display);
font-weight: var(--w-medium);
font-size: var(--text-eyebrow);
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--ink-soft);
}
.display {
font-family: var(--font-display);
font-weight: var(--w-medium);
font-size: var(--text-display);
letter-spacing: var(--track-display);
text-transform: uppercase;
line-height: var(--leading-tight);
color: var(--ink);
}
.h1, .h2, .h3, .h4 {
font-family: var(--font-serif-tc);
color: var(--ink);
line-height: var(--leading-snug);
letter-spacing: var(--track-tc);
font-weight: var(--w-500, 500);
}
.h1 { font-size: var(--text-h1); font-weight: var(--w-medium); }
.h2 { font-size: var(--text-h2); font-weight: var(--w-medium); }
.h3 { font-size: var(--text-h3); font-weight: var(--w-medium); }
.h4 { font-size: var(--text-h4); font-weight: var(--w-medium); }
.lead {
font-family: var(--font-sans-tc);
font-weight: var(--w-light);
font-size: var(--text-lead);
line-height: var(--leading-body);
color: var(--ink-soft);
}
.body {
font-family: var(--font-sans-tc);
font-weight: var(--w-light);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--ink);
}
.small { font-size: var(--text-small); font-family: var(--font-sans-tc); font-weight: var(--w-regular); color: var(--ink-soft); }
.caption{ font-size: var(--text-caption); font-family: var(--font-sans-tc); font-weight: var(--w-regular); color: var(--ink-soft); }