/* ==========================================================================
   variables.css — MindVault Design Tokens
   Single source of truth for all CSS custom properties.
   Themes: light (default), dark, sepia, forest, ocean.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Light — default
   -------------------------------------------------------------------------- */
:root {
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F7F7F5;
  --bg-card:       #FFFFFF;
  --text-primary:  #1A1A1A;
  --text-secondary:#6B6B6B;
  --accent:        #4A7C59;
  --accent-light:  #E8F0EB;
  --border:        #E8E8E6;
  --shadow:        0 2px 8px rgba(0,0,0,0.08);
  --radius:        12px;

  /* Typography */
  --font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-body:     400;
  --font-weight-heading:  700;
  --line-height-body:     1.6;

  /* Transitions */
  --transition: 200ms ease;

  /* Hover background for rows/items */
  --hover-bg: rgba(0,0,0,0.04);
}

/* --------------------------------------------------------------------------
   Dark
   -------------------------------------------------------------------------- */
body.dark {
  --bg-primary:    #1A1A1A;
  --bg-secondary:  #242424;
  --bg-card:       #2E2E2E;
  --text-primary:  #F0F0F0;
  --text-secondary:#A0A0A0;
  --accent:        #6BAF80;
  --accent-light:  #2A3D30;
  --border:        #3A3A3A;
  --shadow:        0 2px 8px rgba(0,0,0,0.3);
  --hover-bg:      rgba(255,255,255,0.05);
}

/* --------------------------------------------------------------------------
   Sepia
   -------------------------------------------------------------------------- */
body.sepia {
  --bg-primary:    #F4ECD8;
  --bg-secondary:  #EDE0C4;
  --bg-card:       #F4ECD8;
  --text-primary:  #3B2F2F;
  --text-secondary:#7A6652;
  --accent:        #8B6914;
  --accent-light:  #F0E6C8;
  --border:        #D5C5A1;
  --shadow:        0 2px 8px rgba(0,0,0,0.1);
  --hover-bg:      rgba(0,0,0,0.04);
}

/* --------------------------------------------------------------------------
   Forest
   -------------------------------------------------------------------------- */
body.forest {
  --bg-primary:    #1A2318;
  --bg-secondary:  #212D1E;
  --bg-card:       #293826;
  --text-primary:  #E8F0E6;
  --text-secondary:#9AB89A;
  --accent:        #5DBF6A;
  --accent-light:  #223022;
  --border:        #3A5038;
  --shadow:        0 2px 8px rgba(0,0,0,0.3);
  --hover-bg:      rgba(255,255,255,0.05);
}

/* --------------------------------------------------------------------------
   Ocean
   -------------------------------------------------------------------------- */
body.ocean {
  --bg-primary:    #0F1D2E;
  --bg-secondary:  #162436;
  --bg-card:       #1E2F42;
  --text-primary:  #E0EAF4;
  --text-secondary:#7AA8CC;
  --accent:        #4A9FD4;
  --accent-light:  #1A3048;
  --border:        #2A4060;
  --shadow:        0 2px 8px rgba(0,0,0,0.3);
  --hover-bg:      rgba(255,255,255,0.05);
}