/* ==========================================================
   Forest Fawns — Theme Tokens (v1.1)
   Purpose: shared colors & radius only (NO layout)
========================================================== */

:root {

  /* =========================
     Surfaces (Paper)
  ========================= */
  --paper-1: #fbfaf5;   /* light card */
  --paper-2: #f7f7f0;   /* softened card */
  --paper-3: #eef1e6;   /* subtle highlight */

  /* =========================
     Borders
  ========================= */
  --border-soft:   #d8decc;
  --border-strong: #b0ba98;

  --panel-border:  #c9d1b6;
  --border-frame:  #9eaa86;

  /* =========================
     Ink (Text)
  ========================= */
  --ink-main:  #3f4a33;
  --ink-muted: #6d7860;

  /* =========================
     Primary Accent (Moss)
  ========================= */
  --moss:        #6b8158;  /* primary nav + buttons */
  --moss-deep:   #5f7350;  /* hover / active */
  --accent-soft: #9cad7f;  /* soft moss */

  /* =========================
     Secondary Accent (Berry)
     Use sparingly for contrast
  ========================= */
  --berry:             #8fa6b3;
  --berry-hover:       #7f98a6;
  --berry-soft-bg:     rgba(143, 166, 179, 0.18);
  --berry-soft-border: rgba(143, 166, 179, 0.45);
  --berry-deep: #5f7380;


  /* =========================
     Radius
  ========================= */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  /* =========================
     Panels
  ========================= */
  --panel-bg:      #f7f6ef;
  --panel-radius:  16px;
  /* Sidebar / HUD translucent panel */
  --panel-glass: rgba(255, 255, 255, 0.45);

  /* =========================
     Tertiary Accent (Bark)
     Structural / grounding only
  ========================= */
  --bark:        #6b5a3e;  /* logo brown, table headers */
  --bark-deep:   #584a33;  /* hover / emphasis */
  --bark-soft:   #e8e2d6;  /* very light tint (rare use) */
  
  /* =========================
   Button Tokens (Light Mode)
========================= */
--btn-primary-bg:     var(--moss);
--btn-primary-hover:  var(--moss-deep);
--btn-primary-text:   #ffffff;

--btn-surface:        var(--paper-3);
--btn-surface-hover:  var(--paper-2);
--btn-border:         var(--border-soft);
--btn-text:           var(--ink-main);

--danger-bg: #8b5e5e;        /* muted rose-bark */
--danger-hover: #7a5252;     /* deeper muted hover */

/* =========================
   Achievement Pill Tokens
========================= */

/* Base */
--pill-bg:            var(--paper-3);
--pill-border:        var(--border-soft);
--pill-text:          var(--ink-main);

/* Games (Moss family) */
--pill-games-bg:      rgba(107, 129, 88, 0.12);
--pill-games-border:  rgba(107, 129, 88, 0.35);
--pill-games-text:    var(--moss-deep);

/* Deer (Bark family) */
--pill-deer-bg:       rgba(107, 90, 62, 0.10);
--pill-deer-border:   rgba(107, 90, 62, 0.35);
--pill-deer-text:     var(--bark);

/* Account (Berry family) */
--pill-account-bg:      var(--berry-soft-bg);
--pill-account-border:  var(--berry-soft-border);
--pill-account-text:    var(--berry-deep);

/* =========================
   Achievement Card Tokens
========================= */

/* Base */
--ach-card-bg:            var(--paper-2);
--ach-card-border:        var(--border-soft);
--ach-card-hover-shadow:  0 3px 10px rgba(0, 0, 0, 0.04);

/* Unlocked */
--ach-card-unlocked-bg:       var(--paper-3);
--ach-card-unlocked-border:   var(--border-strong);
--ach-unlocked-text:          var(--moss);

/* Locked */
--ach-card-locked-bg:    var(--paper-1);
--ach-card-locked-opacity: 0.65;

/* Category accents */
--ach-games-accent:   var(--moss);
--ach-deer-accent:    var(--bark);
--ach-account-accent: var(--berry);

/* =========================
   Trophy Pill Tokens
========================= */

/* Gold */
--pill-gold-bg:      rgba(212, 175, 55, 0.18);
--pill-gold-border:  rgba(212, 175, 55, 0.55);
--pill-gold-text:    #8a6d1f;

/* Silver */
--pill-silver-bg:    rgba(180, 180, 185, 0.18);
--pill-silver-border:rgba(180, 180, 185, 0.55);
--pill-silver-text:  #5f6468;

/* Bronze */
--pill-bronze-bg:    rgba(176, 124, 64, 0.18);
--pill-bronze-border:rgba(176, 124, 64, 0.55);
--pill-bronze-text:  #7a4e22;

/* =========================
   Game Reward Flash (Forest Run)
========================= */
--flash-reward-bg:        rgba(107, 129, 88, 0.18);
--flash-reward-border:    rgba(107, 129, 88, 0.45);
--flash-reward-text:      var(--moss-deep);

}


/* ==========================================================
   Forest Fawns — Dark Mode Token Overrides
   Activated via body.theme-dark
========================================================== */

body.theme-dark {

  /* =========================
     Surfaces (Paper → Night)
  ========================= */
  --paper-1: #151c1a;   /* main card */
  --paper-2: #101715;   /* recessed */
  --paper-3: #1b2421;   /* subtle highlight */

  /* =========================
     Borders
  ========================= */
  --border-soft:   rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  --panel-border: rgba(255,255,255,.12);
  --border-frame: rgba(255,255,255,.18);

  /* =========================
     Ink (Text)
  ========================= */
  --ink-main:  #e6ece9;
  --ink-muted: #a5b0ac;

  /* =========================
     Accents (slightly lifted)
  ========================= */
  --moss:        #8fae8c;
  --moss-deep:   #7e9e7b;
  --accent-soft: #a9c3a3;

  --berry:             #9fb6c3;
  --berry-hover:       #8fa9b8;
  --berry-soft-bg:     rgba(159,182,195,.18);
  --berry-soft-border: rgba(159,182,195,.45);

  /* =========================
     Panels
  ========================= */
  --panel-bg: #121916;

  /* =========================
     Button Tokens (Dark Mode)
  ========================= */
  --btn-surface:        #242c29;  /* neutral control */
  --btn-surface-hover:  #2b3531;
  --btn-border:         rgba(255,255,255,.14);
  --btn-text:           var(--ink-main);

  --btn-primary-bg:     #7f8f87;  /* sage stone */
  --btn-primary-hover:  #8fa39a;
  --btn-primary-text:   #0f1714;

  --btn-disabled-bg:    #1b221f;
  --btn-disabled-text:  var(--ink-muted);

  /* =========================
   Achievement Pill Tokens (Dark Mode)
========================= */

--pill-bg:            var(--paper-3);
--pill-border:        var(--border-soft);
--pill-text:          var(--ink-main);

--pill-games-bg:      rgba(143, 174, 140, 0.18);
--pill-games-border:  rgba(143, 174, 140, 0.45);
--pill-games-text:    var(--moss);

--pill-deer-bg:       rgba(181, 157, 117, 0.15);
--pill-deer-border:   rgba(181, 157, 117, 0.40);
--pill-deer-text:     #d7c6a6;

--pill-account-bg:      rgba(159,182,195,.18);
--pill-account-border:  rgba(159,182,195,.45);
--pill-account-text: #b8ccd6;

/* =========================
   Achievement Card Tokens (Dark)
========================= */

--ach-card-hover-shadow: 0 4px 14px rgba(0,0,0,.35);

--ach-games-accent:   var(--moss);
--ach-deer-accent:    #d7c6a6;
--ach-account-accent: var(--berry);

/* =========================
   Trophy Pill Tokens (Dark)
========================= */

--pill-gold-bg:      rgba(212, 175, 55, 0.22);
--pill-gold-border:  rgba(212, 175, 55, 0.65);
--pill-gold-text:    #f1d27a;

--pill-silver-bg:    rgba(200, 200, 205, 0.18);
--pill-silver-border:rgba(200, 200, 205, 0.55);
--pill-silver-text:  #e2e6ea;

--pill-bronze-bg:    rgba(176, 124, 64, 0.22);
--pill-bronze-border:rgba(176, 124, 64, 0.65);
--pill-bronze-text:  #f0c39a;

--flash-reward-bg:        rgba(143, 174, 140, 0.22);
--flash-reward-border:    rgba(143, 174, 140, 0.55);
--flash-reward-text:      var(--moss);


}