/* THENTIQ CREATION — approved visual contract (see docs/THENTIQ-DESIGN-STANDARD.md).
   9 core brand colours, 2 restricted semantic colours; 3 type families.
   Gold = primary action and section labels, teal = interaction, red = likes/danger,
   green = confirmed availability/payment success. Never use gold for a teal control. */
:root {
  --thq-bg: #0B0B0D;
  --thq-card: #151519;
  --thq-raised: #1B1B20;
  --thq-text: #F7F4EC;
  --thq-muted: #AAA7A0;
  --thq-teal: #007E87;
  --thq-teal-highlight: #35B9C1;
  --thq-gold: #F5C542;
  --thq-gold-highlight: #FFD85C;
  --thq-border: rgba(247,244,236,.11);
  --thq-teal-border: rgba(0,126,135,.52);
  /* Semantic states only; NEVER use red/green as decorative brand colours. */
  --thq-semantic-red: #DC4C4C;
  --thq-semantic-green: #2EAD70;
  --thq-heart-liked: var(--thq-semantic-red);
  --thq-stock-available: var(--thq-semantic-green);
  --thq-danger: var(--thq-semantic-red);
  --thq-state-success: var(--thq-semantic-green);
  --thq-payment-green: var(--thq-semantic-green);
  --thq-connectivity-offline: color-mix(in srgb, var(--thq-semantic-red) 80%, var(--thq-bg));
  --thq-connectivity-online: color-mix(in srgb, var(--thq-semantic-green) 65%, var(--thq-bg));
  --thq-font-heading: 'Syne', 'Inter', sans-serif;
  --thq-font-body: 'Inter', sans-serif;
  --thq-font-ui: 'Space Grotesk', 'Inter', sans-serif;
  --thq-connectivity-text: var(--thq-text);
  --font-heading: var(--thq-font-heading);
  --font-display: var(--font-heading);
  --font-body: var(--thq-font-body);
  --font-ui: var(--thq-font-ui);
  --thq-min-label-size: 12px;
}