/*
 * ============================================================
 *  REAL SOLUTION — THEME FILE
 *  Edit ONLY this file to retheme the entire website.
 *  All colours, fonts, spacing tokens, and shadows live here.
 *  style.css must reference ONLY var() — no hex literals there.
 * ============================================================
 */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=Mukta:wght@400;600;700&display=swap');

:root {

  /* ── Primary — Gold (buttons, headings, logo, CTAs) ─────── */
  --blue:        #C8920C;   /* gold base                       */
  --blue-light:  #EDB92E;   /* gold shimmer — warm highlight   */
  --blue-dark:   #7A5500;   /* deep amber-gold shadow          */

  /* Metallic gold gradient — 4-stop dark→base→shimmer→base   */
  /* Use on buttons, CTAs, icons, any element needing 'shine' */
  --gold-gradient:   linear-gradient(135deg, #7A5500 0%, #C8920C 30%, #EDB92E 60%, #9A6C00 100%);
  --gold-gradient-h: linear-gradient(90deg,  #7A5500 0%, #C8920C 32%, #EDB92E 65%, #9A6C00 100%);

  /* ── Accent — Light Teal (badges, borders, hover) ───────── */
  --green:       #2DD4C8;   /* light teal                      */
  --green-light: #5EEAD4;   /* lighter teal                    */
  --green-dark:  #0F766E;   /* darker teal                     */

  /* ── Backgrounds — Deep Teal layered system ─────────────── */
  --bg-page:     #051A1A;   /* page background — near-black teal */
  --bg-alt:      #072525;   /* alternate sections              */
  --bg-card:     #0C3535;   /* card / panel surface            */
  --bg-input:    #0F3E3E;   /* form input fill                 */
  --bg-nav:      rgba(5, 26, 26, 0.97);     /* sticky nav      */
  --bg-footer:   #020D0D;   /* footer — almost-black teal      */
  --bg-stats:    #020D0D;   /* metrics strip                   */
  --bg-modal:    rgba(2, 8, 8, 0.92);       /* modal scrim     */

  /* Hero gradient — deep teal to near-black */
  --hero-gradient: linear-gradient(135deg, #082E2E 0%, #051A1A 65%);
  /* Hero dot-grid pattern colour (URL-encoded hex for SVG fill) */
  --hero-dot-color: %23C8920C;   /* gold dots                  */

  /* ── Typography ─────────────────────────────────────────── */
  --text:         #FFFFFF;                  /* primary — white  */
  --muted:        rgba(255, 255, 255, 0.58);/* secondary        */
  --text-on-dark: #FFFFFF;                  /* on dark surfaces */

  /* ── Borders — gold-tinted ──────────────────────────────── */
  --border:      rgba(200, 146, 12, 0.28);  /* default border   */
  --border-mid:  rgba(200, 146, 12, 0.50);  /* stronger border  */

  /* ── Alpha helpers (used by style.css for chip/focus/glow) ─ */
  --primary-alpha-sm:  rgba(200, 146, 12, 0.10);  /* chip bg    */
  --primary-alpha-md:  rgba(200, 146, 12, 0.22);  /* chip border*/
  --primary-alpha-lg:  rgba(200, 146, 12, 0.38);  /* btn shadow */
  --accent-alpha-sm:   rgba(45, 212, 200, 0.10);  /* badge bg   */
  --accent-alpha-md:   rgba(45, 212, 200, 0.28);  /* badge bdr  */

  /* ── Shadows — deeper for dark backgrounds ──────────────── */
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.30);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.38);
  --shadow-nav:  0 1px 0 rgba(0, 0, 0, 0.30);

  /* ── Shape ──────────────────────────────────────────────── */
  --radius:      12px;

  /* ── Font families ──────────────────────────────────────── */
  --font-main:   'Poppins', sans-serif;
  --font-tamil:  'Mukta', sans-serif;
}