/* ============================================================
   GYM IN PROGRESS — Design Tokens
   colors_and_type.css
   Light-themed, friendly + modern. Brand: aqua/cyan on navy ink.
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts (see <link> in HTML files):
   - Poppins          → display / headings (matches the wordmark)
   - Plus Jakarta Sans → body / UI text
   - JetBrains Mono    → metrics, IDs, tabular numbers
   ============================================================ */

:root {
  /* ---------- BRAND RAMP · AQUA (primary) ---------- */
  --aqua-50:  #ECFEFF;
  --aqua-100: #C9FAFE;   /* bright cyan glow tint (#B6FDFE family) */
  --aqua-200: #99F2FB;
  --aqua-300: #5FE6F4;
  --aqua-400: #2FDAED;
  --aqua-500: #22D4EC;   /* ★ Vibrant Aqua — primary brand */
  --aqua-600: #15ABC2;
  --aqua-700: #14879A;
  --aqua-800: #176E7D;
  --aqua-900: #1A5764;

  /* ---------- BRAND RAMP · OCEAN (deep blue, secondary) ---------- */
  --ocean-50:  #ECF6FB;
  --ocean-100: #CCE7F3;
  --ocean-200: #9DD0E7;
  --ocean-300: #5FB0D6;
  --ocean-400: #2A8FC2;
  --ocean-500: #0F74A8;  /* ★ Deep Blue — secondary brand / CTA */
  --ocean-600: #0C6092;
  --ocean-700: #0B4F78;
  --ocean-800: #0B405F;
  --ocean-900: #0B2F45;

  /* ---------- NEUTRALS · cool navy-tinted slate ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #F8FAFC;
  --neutral-50:  #F1F5F9;
  --neutral-100: #E6EDF3;
  --neutral-200: #D2DCE5;
  --neutral-300: #B4C2CE;
  --neutral-400: #8A9AA8;
  --neutral-500: #647686;
  --neutral-600: #4A5A68;
  --neutral-700: #344452;
  --neutral-800: #1F2D3A;
  --neutral-900: #0B121D;  /* ★ Dark Navy — ink */

  /* ---------- SEMANTIC · status ---------- */
  --success-50:  #E7F7EF;
  --success-500: #15A66A;
  --success-700: #0E7A4D;
  --warning-50:  #FEF4E2;
  --warning-500: #F5A524;
  --warning-700: #B9751A;
  --danger-50:   #FCEBEC;
  --danger-500:  #E5484D;
  --danger-700:  #B5363B;
  --info-50:     var(--aqua-50);
  --info-500:    var(--aqua-500);

  /* ============================================================
     SEMANTIC TOKENS (use these in components)
     ============================================================ */
  /* surfaces */
  --bg:            #F4F8FB;   /* app canvas — faint cool wash */
  --surface:       #FFFFFF;   /* cards, panels, sheets */
  --surface-2:     #F1F5F9;   /* inset / muted surface */
  --surface-3:     #E6EDF3;   /* deeper inset */
  --surface-ink:   #0B121D;   /* dark surface (logo lockups, nav rails) */

  /* text */
  --fg1: #0B121D;  /* primary / headings */
  --fg2: #4A5A68;  /* body / secondary */
  --fg3: #8A9AA8;  /* muted / captions / placeholders */
  --fg-on-aqua:    #07333B;   /* ink for text sitting on aqua fills */
  --fg-on-ocean:   #FFFFFF;   /* text on deep-blue fills */
  --fg-on-dark:    #EAF6FA;   /* text on navy surfaces */
  --fg-inverse:    #FFFFFF;

  /* lines */
  --border:        #D2DCE5;
  --border-subtle: #E6EDF3;
  --border-strong: #B4C2CE;
  --ring:          rgba(34, 212, 236, 0.45);  /* focus ring — aqua */

  /* brand roles */
  --primary:        var(--aqua-500);
  --primary-hover:  var(--aqua-400);
  --primary-press:  var(--aqua-600);
  --primary-ink:    var(--fg-on-aqua);
  --primary-tint:   var(--aqua-50);

  --accent:         var(--ocean-500);   /* deep-blue solid CTA */
  --accent-hover:   var(--ocean-400);
  --accent-press:   var(--ocean-600);
  --accent-ink:     #FFFFFF;
  --accent-tint:    var(--ocean-50);

  /* ---------- RADII (friendly, generous) ---------- */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- ELEVATION (cool navy-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 18, 29, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 18, 29, 0.07);
  --shadow-md: 0 10px 28px rgba(11, 18, 29, 0.09);
  --shadow-lg: 0 24px 56px rgba(11, 18, 29, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  /* signature: aqua glow lifted from the logo mark */
  --glow-aqua: 0 0 0 1px rgba(34,212,236,.35), 0 8px 28px rgba(34, 212, 236, 0.40);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-mid:  200ms;
  --dur-slow: 360ms;

  /* ---------- TYPE · families ---------- */
  --font-display: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---------- TYPE · scale (size / line-height / weight / tracking) ---------- */
  --display-2xl: 700 60px/1.05 var(--font-display);
  --display-xl:  700 48px/1.08 var(--font-display);
  --display-lg:  600 38px/1.12 var(--font-display);
  --h1: 600 30px/1.18 var(--font-display);
  --h2: 600 24px/1.25 var(--font-display);
  --h3: 600 20px/1.30 var(--font-display);
  --h4: 600 17px/1.35 var(--font-sans);
  --body-lg: 400 17px/1.6 var(--font-sans);
  --body:    400 15px/1.6 var(--font-sans);
  --body-sm: 400 13px/1.5 var(--font-sans);
  --caption: 500 12px/1.4 var(--font-sans);
  --overline: 600 11px/1.4 var(--font-sans);
  --mono:    500 13px/1.5 var(--font-mono);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS (opt-in; scope under .gip)
   ============================================================ */
.gip {
  font: var(--body);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gip h1, .gip .h1 { font: var(--h1); letter-spacing: -0.02em; margin: 0; color: var(--fg1); }
.gip h2, .gip .h2 { font: var(--h2); letter-spacing: -0.015em; margin: 0; color: var(--fg1); }
.gip h3, .gip .h3 { font: var(--h3); letter-spacing: -0.01em; margin: 0; color: var(--fg1); }
.gip h4, .gip .h4 { font: var(--h4); margin: 0; color: var(--fg1); }
.gip .display-2xl { font: var(--display-2xl); letter-spacing: -0.03em; }
.gip .display-xl  { font: var(--display-xl);  letter-spacing: -0.025em; }
.gip .display-lg  { font: var(--display-lg);  letter-spacing: -0.02em; }
.gip .body-lg { font: var(--body-lg); color: var(--fg2); }
.gip p, .gip .body { font: var(--body); color: var(--fg2); }
.gip .body-sm { font: var(--body-sm); color: var(--fg2); }
.gip .caption { font: var(--caption); color: var(--fg3); }
.gip .overline {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg3);
}
.gip .mono { font: var(--mono); font-variant-numeric: tabular-nums; }
.gip a { color: var(--ocean-500); text-decoration: none; }
.gip a:hover { color: var(--ocean-400); }