/* ============================================================ SCENT SMART — Design Tokens colors_and_type.css Premium, calm fragrance brand. Graphite gray accent, silver/gray neutrals, charcoal text on white / soft off-white. Refined serif (Cormorant Garamond) for display + fragrance names, clean sans (Inter) for body & UI. ============================================================ */ /* Fonts are loaded via Google Fonts in each HTML : Cormorant Garamond (500,600,700) + Inter (400,500,600,700). */ :root { /* ---------- BRAND / ACCENT (deep graphite gray) ---------- */ --teal-900: #2A2F33; /* deepest, pressed states */ --teal-700: #3A3F45; /* PRIMARY accent — buttons, links, brand */ --teal-500: #4B5563; /* hover / mid */ --teal-300: #6B7280; /* highlight — match score, savings */ --teal-100: #E5E7EB; /* tint fills, chips */ --teal-050: #F3F4F6; /* faintest wash, section tints */ /* ---------- NEUTRALS (charcoal → silver) ---------- */ --ink: #1A1D1F; /* primary text — charcoal, never pure black */ --ink-2: #3A3F43; /* secondary headings */ --gray-600: #5C6368; /* body text on light */ --gray-500: #6B7177; /* supporting copy */ --gray-400: #9CA3AF; /* muted text, captions, placeholders */ --gray-300: #CBD0D6; /* dividers, disabled */ --gray-200: #E5E7EB; /* hairline borders */ --gray-100: #EFF1F3; /* subtle fills */ --silver: #C9CFD6; /* metallic silver accents */ /* ---------- SURFACES ---------- */ --bg: #FFFFFF; /* base background */ --bg-soft: #FAFAF8; /* alternating off-white sections */ --bg-tint: #F3F4F6; /* faint gray wash sections */ --card: #FFFFFF; /* card surface */ --card-soft: #FAFAF8; /* ---------- SEMANTIC ---------- */ --fg1: var(--ink); /* primary foreground */ --fg2: var(--gray-600); /* body */ --fg3: var(--gray-400); /* muted */ --accent: var(--teal-700); --accent-bright: var(--teal-300); --border: var(--gray-200); --border-strong: var(--gray-300); --success: var(--teal-700); --save: var(--teal-700); /* savings highlight */ /* ---------- TYPE FAMILIES ---------- */ --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* ---------- TYPE SCALE (clamped, mobile-first → desktop) ---------- */ --display: clamp(2.3rem, 8vw, 5.25rem); /* hero headline (serif) */ --h1: clamp(1.95rem, 5.4vw, 3.75rem); /* section heads (serif) */ --h2: clamp(1.75rem, 3.4vw, 2.6rem); /* sub-section */ --h3: clamp(1.25rem, 2vw, 1.6rem); /* card titles */ --h4: 1.125rem; --body-lg: 1.1875rem; /* 19px — value lines, lead */ --body: 1.0625rem; /* 17px — default body */ --small: 0.9375rem; /* 15px — captions */ --eyebrow: 0.8125rem; /* 13px — labels, uppercase */ /* ---------- WEIGHTS ---------- */ --w-serif-med: 500; --w-serif-semi: 600; --w-serif-bold: 700; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; /* ---------- LINE HEIGHTS / SPACING ---------- */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.62; --tracking-tight: -0.02em; --tracking-wide: 0.14em; /* eyebrows */ /* ---------- RADII ---------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; /* default card radius */ --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* ---------- SHADOWS (soft, diffuse, low-contrast) ---------- */ --shadow-xs: 0 1px 2px rgba(26,29,31,0.04); --shadow-sm: 0 2px 8px rgba(26,29,31,0.05); --shadow-md: 0 10px 30px rgba(26,29,31,0.07); --shadow-lg: 0 24px 60px rgba(26,29,31,0.10); --shadow-teal: 0 12px 30px rgba(58,63,69,0.18); /* ---------- LAYOUT ---------- */ --maxw: 1200px; --gutter: clamp(18px, 5vw, 72px); --section-y: clamp(64px, 11vw, 200px); } /* ============================================================ SEMANTIC ELEMENT DEFAULTS ============================================================ */ .display, h1.display { font-family: var(--font-serif); font-weight: var(--w-serif-semi); font-size: var(--display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); } h1, .h1 { font-family: var(--font-serif); font-weight: var(--w-serif-semi); font-size: var(--h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); } h2, .h2 { font-family: var(--font-serif); font-weight: var(--w-serif-semi); font-size: var(--h2); line-height: 1.16; letter-spacing: var(--tracking-tight); color: var(--fg1); } h3, .h3 { font-family: var(--font-serif); font-weight: var(--w-serif-semi); font-size: var(--h3); line-height: 1.25; color: var(--fg1); } .fragrance-name { font-family: var(--font-serif); font-weight: var(--w-serif-semi); letter-spacing: 0.01em; color: var(--fg1); } .eyebrow { font-family: var(--font-sans); font-weight: var(--w-semi); font-size: var(--eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); } .lead { font-family: var(--font-sans); font-weight: var(--w-reg); font-size: var(--body-lg); line-height: 1.55; color: var(--fg2); } p, .body { font-family: var(--font-sans); font-weight: var(--w-reg); font-size: var(--body); line-height: var(--lh-body); color: var(--fg2); } .small, small { font-family: var(--font-sans); font-size: var(--small); color: var(--fg3); }