/* ============================================================
   theme-light.css  –  light mode variables
   Load after theme-base.css
   ============================================================ */
:root {
  /* Colours */
  --body-bg:              #E5E0D8;
  --bg:                   #F2EFE9;
  --accent:               #3DC47E;
  --accent-dark:          #2BA366;
  --text:                 #1A1A1A;
  --text-mid:             #555555;
  --muted:                #999999;
  --divider:              rgba(0,0,0,0.07);
  --shadow:               0 2px 12px rgba(0,0,0,0.08);

  --winner:               rgba(61, 196, 126, 0.12);
  --winner-border:        #3DC47E;
  --winner-text-color:    var(--accent-dark);
  --total-col-color:      var(--text);

  --starter-row-bg:       rgba(61,196,126,0.05);

  /* Buttons */
  --theme-btn-bg:         rgba(0,0,0,0.1);
  --theme-btn-bg-hover:   rgba(0,0,0,0.2);

  --round-badge-bg:       var(--text);
  --round-badge-padding:  7px 18px;
  --round-badge-letter-spacing: 0.5px;

  --btn-back-padding:     8px 16px;
  --btn-back-radius:      50px;
  --btn-back-border:      2px solid var(--divider);
  --btn-back-bg:          #FFFFFF;
  --btn-back-bg-hover:    #F5F3EE;
  --btn-back-color:       var(--text-mid);

  /* Table */
  --table-wrapper-padding:12px 12px 0;
  --table-collapse:       separate;
  --table-bg:             #FFFFFF;
  --table-shadow:         0 2px 12px rgba(0,0,0,0.08);
  --thead-bg:             var(--text);
  --thead-color:          rgba(255,255,255,0.6);
  --thead-letter-spacing: 1.5px;
  --td-padding:           13px 14px;
  --row-hover-bg:         #FAFAF8;
  --empty-svg-opacity:    0.25;

  /* Team rows */
  --team-header-bg:       #EFEFEB;
  --team-header-letter-spacing: 1.5px;
  --team-header-padding:  7px 14px;
  --team-total-padding:   11px 14px;

  /* Add area */
  --add-area-bg:          #EDEAE3;
  --add-area-padding:     16px;
  --add-area-margin-top:  12px;

  /* Inputs */
  --input-padding:        11px 14px;
  --input-radius:         12px;
  --input-border:         2px solid var(--divider);
  --input-bg:             #F5F3EE;
  --input-placeholder:    var(--muted);
  --select-option-bg:     #fff;
  --select-option-color:  var(--text);

  /* Confirm / cancel buttons */
  --btn-radius:           12px;
  --btn-cancel-border:    2px solid var(--divider);
  --btn-cancel-bg:        #FFFFFF;
  --btn-cancel-bg-hover:  #F5F3EE;
  --btn-cancel-color:     var(--text-mid);

  /* Round input rows */
  --round-input-row-bg:   #FFFFFF;

  /* Step buttons */
  --step-btn-border:      2px solid var(--divider);
  --step-btn-bg:          #F5F3EE;
  --step-btn-bg-hover:    var(--accent);
  --step-btn-color-hover: #fff;

  /* Score input */
  --score-input-border:   2px solid var(--divider);
  --score-input-focus-bg: var(--input-bg);
}