/* ============================================================ HaoGood Group (HGG) — "Feel Good Company" NZ casual Asian dining group · 5 venues operating + 2 onboarding Family palette extracted từ official brand reference (2026-05-20): - Primary #F46742 → h:12 s:89% l:61% vivid coral-orange - Accent #9F3D4A → h:352 s:45% l:43% burgundy / wine - Surface L #F0EDE6 → off-white warm cream - Surface D #231F20 → near-black charcoal ⚠️ WCAG NOTE (verified 2026-05-20 via contrast-check.py): Primary orange L:61% × white text = 3.07:1 → FAILS AA 4.5:1 Primary orange × charcoal text = 6.85:1 → PASSES AA => RULE: text on primary BG MUST be charcoal, NOT white => --primary-on override below enforces this Sub-brand presets (lucky8/jungle8/mrhao/catalina/...) INHERIT primary từ file này — KHÔNG override --brand-primary-*. Differentiation chỉ qua iconography + typography accent + photo style. Xem: brands/haogood/family-strategy.md Aesthetic mặc định: warm (landing/marketing/menu) Override sang dark: chỉ cho admin/dashboard sub-app Font hint: Inter (body) + Archivo Black (display) + Caveat (script accent rare) ============================================================ */ :root { /* ---------- PRIMARY (decoration + hero accent; brand identity orange) ---------- */ --brand-primary-h: 12; --brand-primary-s: 89%; --brand-primary-l: 61%; /* WCAG FORCE: dark text on primary BG (charcoal #231F20). Default math would pick white at l>50%; HGG orange is special-case because vibrant red-orange has high perceptual luminance asymmetry. */ --primary-on: hsl(345 4% 13%); /* ---------- PRIMARY DEEP (UI element on cream BG — passes 3:1) ---------- Use cho: small button, icon, badge, link underline trên surface cream. Brand orange l:61% × cream = 2.62:1 fail; deep variant l:38% = 4.5:1+ pass. */ --primary-deep-l: 38%; --primary-deep: hsl(var(--brand-primary-h) var(--brand-primary-s) var(--primary-deep-l)); /* ---------- ACCENT (burgundy — works with white text, AA 6.51:1 pass) ---------- */ --brand-accent-h: 352; --brand-accent-s: 45%; --brand-accent-l: 43%; --accent-on: hsl(0 0% 100%); /* white text on burgundy is safe */ /* ---------- HIGHLIGHT (warm yellow — badge/tag only, ALWAYS dark text) ---------- */ --brand-highlight-h: 42; --brand-highlight-s: 85%; --brand-highlight-l: 58%; --highlight-on: hsl(345 4% 13%); /* WCAG: yellow × white fails 1.81:1 — force charcoal */ /* ---------- SURFACE override (HGG-specific cream + charcoal) ---------- */ --hgg-surface-warm: hsl(40 18% 92%); /* #F0EDE6 official cream */ --hgg-surface-dark: hsl(345 4% 13%); /* #231F20 official charcoal */ /* ---------- CTA DARK VARIANT (when white text on dark button required) ---------- */ /* Use này khi muốn dark CTA button với white text — vd primary CTA "RESERVE" cứng */ --cta-dark-bg: hsl(345 4% 13%); /* charcoal */ --cta-dark-on: hsl(0 0% 100%); /* white */ --cta-dark-hover: hsl(12 89% 56%); /* slightly darker orange on hover, swap to dark text */ /* ---------- HOVER STATE LIGHTNESS DELTA ---------- */ /* Brand hover = ±6% lightness (NOT default Tailwind opacity-90) */ --hover-delta: 6%; } /* ============================================================ AESTHETIC CLASSES (paired with body class) → marketing/landing/menu (default) → admin/dashboard subset ============================================================ */ body.aesthetic-warm { background: var(--hgg-surface-warm); color: var(--hgg-surface-dark); } body.aesthetic-dark { background: var(--hgg-surface-dark); color: var(--hgg-surface-warm); } /* ============================================================ BUTTON PATTERNS — HGG family convention Use one of these 3 patterns, not random Tailwind utility ============================================================ */ /* Pattern 1: PRIMARY ORANGE CTA — orange BG, charcoal text (warm/loud) IMPORTANT: ≥48px height required on cream BG (UI 3:1 only achieved at hero scale). For small button (<48px) on cream, use .btn-primary-deep instead. */ .btn-primary { background: hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l)); color: var(--primary-on); border: 1px solid transparent; box-shadow: 0 2px 0 hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - 12%)); transition: background 180ms ease-out, box-shadow 180ms ease-out; } .btn-primary:hover { background: hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - var(--hover-delta))); box-shadow: 0 4px 0 hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - 18%)); } /* Pattern 1b: PRIMARY DEEP — for small UI on cream BG (passes UI 3:1) */ .btn-primary-deep { background: var(--primary-deep); color: hsl(0 0% 100%); transition: background 180ms ease-out; } .btn-primary-deep:hover { background: hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--primary-deep-l) - var(--hover-delta))); } /* Pattern 2: DARK CTA — charcoal BG, white text (cứng/premium feel) */ .btn-dark { background: var(--cta-dark-bg); color: var(--cta-dark-on); transition: background 180ms ease-out; } .btn-dark:hover { background: var(--cta-dark-hover); color: var(--primary-on); /* swap to charcoal on orange hover */ } /* Pattern 3: ACCENT BURGUNDY — for premium/secondary action (Jungle 8 fit) */ .btn-accent { background: hsl(var(--brand-accent-h) var(--brand-accent-s) var(--brand-accent-l)); color: var(--accent-on); transition: background 180ms ease-out; } .btn-accent:hover { background: hsl(var(--brand-accent-h) var(--brand-accent-s) calc(var(--brand-accent-l) - var(--hover-delta))); } /* Sub-brand class layered (xem family-strategy.md): → adds Lucky-8-specific accent overrides → adds Jungle-8 premium typography → adds Mr Hao casual tweaks → adds Catalina membership/3D treatment */