/* ============================================================
   Red Lockers — intermediate design system (extracted from sot)
   tokens.css — single source of design tokens
   ============================================================ */

:root {
  /* ---------- surfaces & background ---------- */
  --bg:              #F4F5FB;
  --surface:         rgba(255, 255, 255, 0.72);
  --surface-solid:   #FFFFFF;
  --surface-hover:   rgba(255, 255, 255, 0.92);
  --surface-soft:    rgba(255, 255, 255, 0.6);
  --surface-pressed: rgba(255, 255, 255, 0.5);

  /* ---------- borders ---------- */
  --border:          rgba(20, 20, 60, 0.06);
  --border-strong:   rgba(20, 20, 60, 0.10);
  --hairline:        rgba(20, 20, 60, 0.05);

  /* ---------- ink (text) ---------- */
  --text:            #14143C;
  --text-muted:      #6B6E8A;
  --text-faint:      #9A9CB3;
  --text-on-accent:  #FFFFFF;

  /* ---------- accent (indigo) ---------- */
  --accent:          #4F46E5;
  --accent-hover:    #4338CA;
  --accent-soft:     #EEF1FF;
  --accent-soft-2:   #E0E5FF;
  --accent-grad:     linear-gradient(135deg, #4F46E5, #6366F1);
  --accent-grad-hover: linear-gradient(135deg, #4338CA, #4F46E5);

  /* ---------- semantic states ---------- */
  --success:         #10B981;
  --success-bg:      #D1FAE5;
  --success-text:    #065F46;
  --success-soft:    rgba(16, 185, 129, 0.08);
  --success-edge:    rgba(16, 185, 129, 0.20);

  --warning:         #F59E0B;
  --warning-bg:      #FEF3C7;
  --warning-text:    #92400E;

  --danger:          #EF4444;
  --danger-bg:       #FEE4E2;
  --danger-text:     #991B1B;

  --info:            #3B82F6;
  --info-bg:         #DBEAFE;
  --info-text:       #1E40AF;

  --neutral-bg:      rgba(20, 20, 60, 0.05);

  /* ---------- shadows ---------- */
  --shadow-sm:       0 1px 2px rgba(20, 20, 60, 0.04);
  --shadow-md:       0 4px 16px rgba(20, 20, 60, 0.06);
  --shadow-lg:       0 12px 40px rgba(20, 20, 60, 0.08);
  --shadow-accent:   0 6px 18px rgba(79, 70, 229, 0.30);
  --shadow-balance:  0 12px 32px rgba(79, 70, 229, 0.25);

  /* ---------- radii ---------- */
  --radius-xs:       8px;
  --radius-sm:       10px;
  --radius-md:       14px;
  --radius-lg:       22px;
  --radius-xl:       28px;
  --radius-pill:     999px;

  /* ---------- glass blur ---------- */
  --blur-glass:      20px;
  --blur-soft:       10px;
  --blur-blob:       110px;

  /* ---------- typography ---------- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-13:   13px;   /* intermediate step between sm(12) and base(14); aliased as --fs-sm-plus */
  --fs-sm-plus: var(--fs-13); /* named-scale alias honoring the semantic xs/sm/base convention */
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   24px;
  --fs-2xl:  28px;
  --fs-amount: 32px;
  --lh-tight: 1.1;
  --lh-base:  1.5;
  --lh-relaxed: 1.6;
  --tracking-eyebrow: 0.10em;
  --tracking-tight:  -0.01em;
  --tracking-amount: -0.02em;

  /* ---------- spacing scale (informal — gaps come in 6/10/12/14/18/22/26 multiples) ---------- */
  --space-card-x:   26px;
  --space-card-y:   22px;
  --space-grid-gap: 18px;
  --space-stack-gap: 18px;

  /* ---------- motion ---------- */
  --dur-fast: 0.18s;
  --dur-base: 0.22s;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- decorative gradients used in the chrome ---------- */
  --grad-balance:    linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4F46E5 100%);
  --grad-avatar:     linear-gradient(135deg, #DDD6FE, #FBCFE8);
  --grad-avatar-ring: var(--accent-soft-2); /* single-tone indigo-soft ring (was purple→pink→amber rainbow) */
  --grad-logo:       linear-gradient(135deg, #4F46E5, #7C3AED);

  /* ---------- decorative blobs (page background) ---------- */
  --blob-purple:     radial-gradient(circle, #C4B5FD 0%, #A78BFA 40%, transparent 70%);
  --blob-pink:       radial-gradient(circle, #FBA8D1 0%, #F472B6 40%, transparent 70%);
  --blob-amber:      radial-gradient(circle, #FCD34D 0%, #FBBF24 40%, transparent 70%);
  --blob-balance-pink: radial-gradient(circle, rgba(244, 114, 182, 0.4), transparent 70%);
  --blob-balance-amber: radial-gradient(circle, rgba(251, 191, 36, 0.3), transparent 70%);
}