/* ============================================================
   ScaleRetain — Color tokens
   Pure-dark agency palette. Near-black canvas, layered dark
   surfaces, bright azure accent (#10A0FF) with a cyan→blue glow.
   ============================================================ */
:root {
  /* ---- Brand azure (the one accent) ---- */
  --sr-blue-50:  #e8f5ff;
  --sr-blue-100: #c9e9ff;
  --sr-blue-200: #99d4ff;
  --sr-blue-300: #5ab6ff;   /* logo light / highlight */
  --sr-blue-400: #2ea6ff;
  --sr-blue-500: #10a0ff;   /* PRIMARY accent */
  --sr-blue-600: #0a83e6;
  --sr-blue-700: #0a6dc2;
  --sr-blue-800: #0d579b;
  --sr-cyan-400: #4fc3ff;   /* logo top tint */

  /* ---- Neutral ramp (cool, very dark) ---- */
  --sr-black:    #050607;   /* deepest */
  --sr-ink-950:  #08090b;   /* page canvas */
  --sr-ink-900:  #0c0d10;
  --sr-ink-850:  #101216;   /* raised surface */
  --sr-ink-800:  #15171c;   /* card */
  --sr-ink-700:  #1c1f26;   /* card hover / input */
  --sr-ink-600:  #262a33;   /* hairline-strong */
  --sr-ink-500:  #3a3f4a;
  --sr-ink-400:  #565c69;
  --sr-ink-300:  #7b8290;   /* muted text */
  --sr-ink-200:  #aab1bd;   /* secondary text */
  --sr-ink-100:  #d6dae1;
  --sr-white:    #f5f7fa;   /* primary text (not pure white) */

  /* ---- Semantic feedback ---- */
  --sr-success: #34d399;
  --sr-warning: #fbbf24;   /* star ratings, badges */
  --sr-danger:  #f87171;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  /* Surfaces */
  --surface-canvas:    var(--sr-ink-950);
  --surface-raised:    var(--sr-ink-850);
  --surface-card:      var(--sr-ink-800);
  --surface-card-hover:var(--sr-ink-700);
  --surface-input:     var(--sr-ink-700);
  --surface-inverse:   var(--sr-white);

  /* Text */
  --text-primary:   var(--sr-white);
  --text-secondary: var(--sr-ink-200);
  --text-muted:     var(--sr-ink-300);
  --text-disabled:  var(--sr-ink-400);
  --text-accent:    var(--sr-blue-500);
  --text-on-accent: #04223d;   /* deep navy text that sits on bright blue buttons */
  --text-inverse:   var(--sr-ink-950);

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.16);
  --border-accent:  var(--sr-blue-500);

  /* Accent fills */
  --accent:         var(--sr-blue-500);
  --accent-hover:   var(--sr-blue-400);
  --accent-press:   var(--sr-blue-600);
  --accent-soft:    rgba(16,160,255,0.12);
  --accent-ring:    rgba(16,160,255,0.40);

  /* Signature button + glow gradients */
  --grad-blue-btn:  linear-gradient(180deg, #57b8ff 0%, #10a0ff 52%, #0c8df0 100%);   /* @kind color */
  --grad-logo:      linear-gradient(155deg, #6cc6ff 0%, #2ea6ff 45%, #0a78e0 100%);   /* @kind color */
  --grad-page-glow: radial-gradient(120% 80% at 50% -8%, rgba(16,160,255,0.18) 0%, rgba(16,160,255,0.05) 30%, transparent 60%);   /* @kind color */
  --grad-card-sheen:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);   /* @kind color */
}