/* =============================================================
   THEME SYSTEM
   =============================================================
   Each theme is a [data-theme="..."] selector that defines a
   fixed set of semantic CSS custom properties.  The <html>
   element in base.html carries the data-theme attribute, so
   swapping themes at runtime is a single attribute change.

   TO ADD A NEW THEME
   ------------------
   1. Copy the [data-theme="navy-gold"] block below.
   2. Rename it and adjust the values.
   3. Add an entry to the AVAILABLE_THEMES list in
      judging/theme_utils.py (once that module exists).
   4. Store the user's choice on their UserProfile (field TBD).
   5. Render <html data-theme="{{ request.user.profile.theme }}">
      in base.html.  The fallback is already :root so an empty
      or unknown value shows navy-gold automatically.

   VARIABLE NAMING CONVENTION
   --------------------------
   --color-primary        Header / navbar / strong brand surfaces
   --color-primary-mid    Lighter primary for section dividers, sub-headers
   --color-accent         Gold band, primary button, star, key highlights
   --color-accent-dark    Pressed / border variant of accent
   --color-accent-hover   Button hover background (near-white tint)
   --color-accent-tint    Very light accent wash (message banners, card tints)
   --color-accent-border  Border for accent-tinted boxes

   --color-bg             Page background
   --color-surface        Card / panel background
   --color-text           Body text
   --color-text-muted     Secondary / placeholder text
   --color-border         Dividers, table borders
   --color-row-hover      Table row hover fill
   ============================================================= */


/* -------------------------------------------------------------
   DEFAULT THEME: Navy & Gold
   ------------------------------------------------------------- */
:root,
[data-theme="navy-gold"] {
  --color-primary:       #0f2747;
  --color-primary-mid:   #1e3f6e;
  --color-accent:        #d4af37;
  --color-accent-dark:   #b8941e;
  --color-accent-hover:  #fef9e7;
  --color-accent-tint:   #fff8db;
  --color-accent-border: #f0df8c;

  --color-bg:            #f7f8fb;
  --color-surface:       #ffffff;
  --color-text:          #1f2937;
  --color-text-muted:    #6b7280;
  --color-border:        #e5e7eb;
  --color-row-hover:     #f0f5fa;

  /* Legacy aliases — keep these so existing templates that still
     reference var(--navy) / var(--gold) continue to work while
     they are gradually migrated to the semantic names above.    */
  --navy:   var(--color-primary);
  --gold:   var(--color-accent);
  --light:  var(--color-bg);
  --text:   var(--color-text);
  --border: var(--color-border);
  --white:  var(--color-surface);
}


/* -------------------------------------------------------------
   PLACEHOLDER: Forest & Silver  (not yet active)
   Uncomment and flesh out the values to enable this theme.
   ------------------------------------------------------------- */
/*
[data-theme="forest-silver"] {
  --color-primary:       #1a3d2b;
  --color-primary-mid:   #2e6b4a;
  --color-accent:        #8fa8b0;
  --color-accent-dark:   #6e8a94;
  --color-accent-hover:  #f0f4f6;
  --color-accent-tint:   #e8eff2;
  --color-accent-border: #c0d4da;

  --color-bg:            #f5f7f5;
  --color-surface:       #ffffff;
  --color-text:          #1a2a1a;
  --color-text-muted:    #5a7060;
  --color-border:        #d0dfd0;
  --color-row-hover:     #edf2ed;

  --navy:   var(--color-primary);
  --gold:   var(--color-accent);
  --light:  var(--color-bg);
  --text:   var(--color-text);
  --border: var(--color-border);
  --white:  var(--color-surface);
}
*/