/* ============================================================ PURPLE TRUNK — Indian Craft Cocktails Foundations: Color + Typography tokens ------------------------------------------------------------ Fonts: • DISPLAY → "Norman Medium (modified)" in the real brand. Norman is a licensed foundry face and is NOT on Google Fonts, so we SUBSTITUTE "Cormorant Garamond" (a high-contrast editorial serif) as the nearest free match. >>> Replace with licensed Norman files in /fonts and update --font-display to ship exact. • MONO → "Xanh Mono" — EXACT brand face, loaded from Google. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Xanh+Mono:ital@0;1&display=swap'); :root { /* ---- BRAND PALETTE (exact values from Brand Guide) ---- */ --pt-black: #231F20; /* "BLACK" R35 G31 B32 */ --pt-white: #FFFFFF; /* "WHITE" */ --pt-purple: #4D1552; /* "PURPLE" R77 G21 B82 — primary */ --pt-lemonade: #F4B220; /* "LEMONADE" PMS 7409C — golden */ --pt-sand: #BC6A28; /* "SAND" R188 G106 B40 — terracotta */ --pt-emerald: #1C3E1C; /* "EMERALD" R28 G62 B28 — deep green */ --pt-sage: #768C6F; /* "SAGE" R118 G140 B111 — muted green */ --pt-mango: #F58220; /* "MANGO" PMS 151C — orange */ --pt-rose: #D7272E; /* "ROSE" PMS 1795C — red */ /* ---- TINTS / EXTENDED RAMP (derived, oklch-harmonised) ---- */ --pt-purple-700: #380E3C; /* deepened purple for hovers/footers */ --pt-purple-200: #C9B4CE; /* soft purple wash */ --pt-purple-050: #F2ECF3; /* faint lilac surface */ --pt-mango-050: #FEF1E3; /* warm wash */ --pt-lemonade-050:#FDF5E0; --pt-sage-050: #EEF1EC; /* ---- PAPER / NEUTRAL SURFACES (warm, not pure grey) ---- */ --pt-paper: #FBF7F0; /* warm ivory — primary page background */ --pt-paper-2: #F4EDE1; /* secondary panel / card on paper */ --pt-ink-80: #4A4546; /* softened black for body copy */ --pt-ink-55: #7C7678; /* muted captions */ --pt-line: #E3D9C9; /* hairline rules on paper */ --pt-line-ink: rgba(35,31,32,.14); /* ---- SEMANTIC ROLES ---- */ --bg: var(--pt-paper); --bg-elevated: var(--pt-white); --bg-invert: var(--pt-purple); --fg: var(--pt-black); --fg-muted: var(--pt-ink-80); --fg-subtle: var(--pt-ink-55); --fg-invert: var(--pt-white); --brand: var(--pt-purple); --accent: var(--pt-mango); --accent-warm: var(--pt-lemonade); --accent-red: var(--pt-rose); --border: var(--pt-line); --focus-ring: var(--pt-mango); /* ---- TYPE FAMILIES ---- */ --font-display: "Cormorant Garamond", "Norman", "Hoefler Text", Georgia, serif; /* SUBSTITUTE */ --font-mono: "Xanh Mono", "Courier New", ui-monospace, monospace; /* EXACT */ --font-body: "Cormorant Garamond", "Norman", Georgia, serif; /* ---- TYPE SCALE (display serif, generous) ---- */ --fs-display: clamp(56px, 9vw, 132px); --fs-h1: clamp(40px, 6vw, 76px); --fs-h2: clamp(30px, 4vw, 48px); --fs-h3: 28px; --fs-h4: 22px; --fs-body-lg: 22px; --fs-body: 19px; --fs-small: 16px; /* mono is used small + tracked-out for eyebrows / labels */ --fs-eyebrow: 13px; --fs-label: 12px; --fs-caption: 13px; --lh-tight: 0.98; --lh-snug: 1.12; --lh-body: 1.55; /* tracking: display serif tightens, mono labels track WIDE */ --tr-display: -0.01em; --tr-tight: -0.02em; --tr-mono: 0.18em; /* the signature wide-spaced caps look */ --tr-mono-sm: 0.12em; /* ---- RADIUS (soft, label-like; the elephant badge is the only hard geometry) ---- */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* ---- SHADOWS (warm-tinted, low + diffuse — "bottle on a shelf") ---- */ --shadow-sm: 0 1px 2px rgba(35,31,32,.06), 0 1px 1px rgba(35,31,32,.04); --shadow-md: 0 4px 14px rgba(35,31,32,.08), 0 2px 4px rgba(35,31,32,.05); --shadow-lg: 0 18px 40px rgba(35,31,32,.14), 0 6px 14px rgba(35,31,32,.07); --shadow-glow:0 10px 30px rgba(77,21,82,.22); /* ---- SPACING (4px base) ---- */ --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; --maxw: 1200px; --ease: cubic-bezier(.2,.6,.2,1); } /* ============================================================ SEMANTIC ELEMENT STYLES (opt-in via .pt-prose / utility classes) ============================================================ */ .pt-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--accent); font-style: normal; } .pt-display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-display); text-wrap: balance; } h1, .pt-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-display); text-wrap: balance; } h2, .pt-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-display); } h3, .pt-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; } .pt-h4 { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-label); letter-spacing: var(--tr-mono-sm); text-transform: uppercase; } p, .pt-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-muted); } .pt-body-lg { font-size: var(--fs-body-lg); line-height: 1.5; } .pt-label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-mono-sm); text-transform: uppercase; color: var(--fg-subtle); } .pt-mono { font-family: var(--font-mono); } /* Wordmark-style caps set in the display serif (use when no logo art) */ .pt-wordmark { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; line-height: .9; }