/* ============================================================
   LODE Strength — Color tokens
   Brand is dark-first (logo lives on black). A light scope
   mirrors the in-app light theme (active-workout screen).
   ============================================================ */

:root {
  /* ---- Brand blue (the logo gradient: bright top → deep bottom) ---- */
  --lode-blue-bright: #2E8BFF;   /* top plates / highlights */
  --lode-blue:        #1C6BFF;   /* PRIMARY — buttons, active, links */
  --lode-blue-600:    #1559E6;
  --lode-blue-deep:   #0B3CE0;   /* bottom plates */
  --lode-blue-ink:    #0A2A9E;   /* pressed / deepest */
  --lode-blue-tint:   #1C6BFF1f; /* 12% wash for selected pills */

  /* Signature logo gradient + ambient glow */
  --lode-gradient: linear-gradient(180deg, #2E8BFF 0%, #1C6BFF 48%, #0B3CE0 100%); /* @kind color */
  --lode-gradient-flat: linear-gradient(135deg, #2E8BFF 0%, #0E47E6 100%); /* @kind color */
  --glow-blue: 0 0 28px rgba(28, 107, 255, 0.55);

  /* ---- Category / semantic accents (Workouts use these per split) ---- */
  --c-green:  #34C759;   /* Legs · success · "Complete" · Log Set */
  --c-green-bright: #30D158;
  --c-amber:  #F5A623;   /* Pull · rest · warning */
  --c-amber-bright: #FFB02E;
  --c-red:    #FF453A;   /* Push · destructive · "End Workout" */
  --c-red-bright: #FF3B30;
  --c-lavender: #C9C4F7; /* Watch secondary / back affordance */
  --c-heart:  #FF2D55;   /* heart-rate readout */

  /* ---- Greyscale ramp (neutral, slight cool cast) ---- */
  --grey-0:  #000000;
  --grey-950:#0B0B0D;
  --grey-900:#0F0F12;
  --grey-850:#161619;
  --grey-800:#1C1C1F;
  --grey-700:#2A2A2E;
  --grey-600:#3A3A40;
  --grey-500:#636368;
  --grey-400:#8E8E96;
  --grey-300:#AEAEB6;
  --grey-200:#C7C7CC;
  --grey-100:#E5E5EA;
  --grey-50: #F2F2F7;
  --white:   #FFFFFF;

  /* ============================================================
     SEMANTIC ALIASES — default theme is DARK (brand identity)
     ============================================================ */
  --bg:               #000000;   /* app canvas */
  --surface:          #0F0F12;   /* grouped background */
  --surface-elevated: #1C1C1F;   /* sheets, fields, toolbars */
  --card:             #161619;   /* content cards */
  --card-hover:       #1F1F23;

  --border:           rgba(255,255,255,0.08);
  --border-strong:    rgba(255,255,255,0.16);
  --separator:        rgba(255,255,255,0.10);

  --text:             #FFFFFF;
  --text-secondary:   #98989E;
  --text-tertiary:    #636368;
  --text-on-blue:     #FFFFFF;

  --fill-field:       #1C1C1F;   /* input / stepper background */
  --fill-quaternary:  rgba(118,118,128,0.24);

  --primary:          var(--lode-blue);
  --primary-press:    var(--lode-blue-deep);
  --focus-ring:       rgba(46, 139, 255, 0.55);
}

/* ============================================================
   LIGHT THEME — mirrors the in-app light mode (set on any
   ancestor: <div class="lode-light"> or [data-theme="light"])
   ============================================================ */
.lode-light,
[data-theme="light"] {
  --bg:               #FFFFFF;
  --surface:          #F2F2F7;
  --surface-elevated: #FFFFFF;
  --card:             #FFFFFF;
  --card-hover:       #F7F7FB;

  --border:           rgba(60,60,67,0.12);
  --border-strong:    rgba(60,60,67,0.22);
  --separator:        rgba(60,60,67,0.16);

  --text:             #000000;
  --text-secondary:   #8E8E93;
  --text-tertiary:    #C7C7CC;

  --fill-field:       #FFFFFF;
  --fill-quaternary:  rgba(118,118,128,0.12);
}