/*
 * Custom color variables centralized for the site. These variables mirror
 * values defined in tailwind.config.js and any custom colours used
 * throughout the templates. Moving them into this file allows the
 * removal of inline colour definitions from individual HTML files so
 * Tailwind can be the single source of truth for colour values.
 */

:root {
  /* Primary brand colours */
  --primary-color: #D97706;        /* amber-600 (primary) */
  --primary-color-dark: #B45309;  /* amber-700 */
  --primary-color-light: #FBBF24; /* amber-400, used for highlights */

  /* Supporting colours */
  --primary-glow: rgba(217, 119, 6, 0.4); /* glow effect used in some cards */
  --dark-bg: #111111;             /* very dark background */
  --secondary-bg: #161616;        /* unified section background */
  --light-dark-bg: #1f1f1f;       /* slightly lighter dark background */
  --card-bg: #202020;             /* dark card background used on some pages */

  /* Text and border colours */
  --text-light: #E5E7EB;          /* light grey for text on dark backgrounds */
  --text-dark: #121212;           /* dark grey for text on light backgrounds */
  --border-color: #374151;        /* grey border colour */

  /* Additional semantic colours used across multiple pages */
  --text-muted: #B0B5C0;         /* muted text colour — 升至 WCAG AAA（7.5:1 on #111） */

  /* CTA specific colours (e.g. WhatsApp button) */
  --whatsapp-color: #25D366;      /* standard WhatsApp green */
  --whatsapp-color-dark: #1FAF54; /* darker shade on hover */

  /* Success colour used on coins page */
  --success-color: #25D366;

  /* Card border colour (alias of border colour) */
  --card-border: #374151;

  /* Additional page-specific dark backgrounds mapped to general values */
  --dark-bg-main: #111111;
  --dark-bg-secondary: #1f1f1f;

  /* Commonly used opacity variants (unified across page-specific styles) */
  --white-border-subtle: rgba(255, 255, 255, 0.08);
  --white-border-light: rgba(255, 255, 255, 0.12);
  --white-bg-subtle: rgba(255, 255, 255, 0.03);
  --white-bg-light: rgba(255, 255, 255, 0.05);
  --white-bg-hover: rgba(255, 255, 255, 0.06);
  --primary-glow-light: rgba(217, 119, 6, 0.16);
  --primary-glow-medium: rgba(217, 119, 6, 0.22);
  --primary-border-subtle: rgba(251, 191, 36, 0.18);
  --primary-border-light: rgba(251, 191, 36, 0.2);
  --shadow-card: rgba(0, 0, 0, 0.28);
  --shadow-card-hover: rgba(0, 0, 0, 0.4);
  --text-light-muted: rgba(229, 231, 235, 0.86);
  --text-white-high: rgba(255, 255, 255, 0.92);
  --text-white-medium: rgba(255, 255, 255, 0.86);

  /* Gray text shades (mapped to Tailwind equivalents) */
  --text-gray-300: #d1d5db;           /* Tailwind gray-300 */
  --text-slate-300: #cbd5e1;          /* Tailwind slate-300 */

  /* Card-specific dark backgrounds */
  --card-bg-dark: #171717;            /* slightly lighter than --dark-bg */

  /* Secondary accent — deep burgundy / claret（酒類品類區隔用） */
  --accent-claret: #7B1E2A;           /* main burgundy */
  --accent-claret-dark: #551018;      /* deeper, used as gradient end */
  --accent-claret-light: #9B2835;     /* brighter, used on hover/border */
  --accent-claret-border: rgba(155, 40, 53, 0.42);
  --accent-claret-glow: rgba(123, 30, 42, 0.38);
  --accent-claret-glow-soft: rgba(123, 30, 42, 0.18);
  --accent-claret-text: #fde8e8;      /* text on burgundy surface */
}

/* Brandy brand-card colour variants */
.brand-card--amber  { --brand-color: #D97706; --brand-color-dark: #B45309; }
.brand-card--sky    { --brand-color: #0ea5e9; --brand-color-dark: #0284c7; }
.brand-card--orange { --brand-color: #f97316; --brand-color-dark: #ea580c; }

/* 注意：.text-gray-400 全站升級已搬到 enhancements.css，
   因為 dist/style.css 載入順序在本檔之後，需放到最後一個檔覆蓋才生效 */