/* ==========================================================================
   Social Paychex — Design Tokens
   Single source of truth. Every shell (creator/brand/admin) and the
   homepage should reference these values rather than redefining them.
   ========================================================================== */
:root{
  /* Colors */
  --sp-green: #5FD84A;
  --sp-green-ink: #1E5C13;
  --sp-black: #131313;
  --sp-near-black: #0B0B0B;
  --sp-offwhite: #FAFAF7;
  --sp-white: #FFFFFF;
  --sp-muted: #5B5B57;
  --sp-surface: #F2F1EC;
  --sp-border: #E4E2D8;

  --sp-success: #1E5C13;
  --sp-success-bg: rgba(95,216,74,0.18);
  --sp-warning: #8A6100;
  --sp-warning-bg: #FDF1C8;
  --sp-error: #A01A5E;
  --sp-error-bg: rgba(230,67,152,0.12);
  --sp-info: #3E5FD9;
  --sp-info-bg: rgba(62,95,217,0.12);

  /* Secondary TV-screen accents — small brand touches only, never
     large backgrounds (per the design direction this whole platform
     has followed since the first redesign pass) */
  --sp-accent-cyan: #3FD9CE;
  --sp-accent-magenta: #E64398;
  --sp-accent-yellow: #F2C230;
  --sp-accent-blue: #3E5FD9;

  /* Typography */
  --sp-font-heading: 'Baloo 2', sans-serif;
  --sp-font-body: 'Inter', sans-serif;
  --sp-font-mono: 'IBM Plex Mono', monospace;

  --sp-text-page-title: 700 1.5rem/1.2 var(--sp-font-heading);
  --sp-text-section-title: 700 1.05rem/1.3 var(--sp-font-heading);
  --sp-text-card-title: 700 0.95rem/1.3 var(--sp-font-heading);
  --sp-text-body: 400 0.9rem/1.6 var(--sp-font-body);
  --sp-text-small: 400 0.8rem/1.5 var(--sp-font-body);
  --sp-text-label: 700 0.72rem/1.3 var(--sp-font-body);
  --sp-text-button: 700 0.85rem/1 var(--sp-font-body);
  --sp-text-data: 700 1.1rem/1.1 var(--sp-font-heading);

  /* Spacing scale */
  --sp-space-xs: 6px;
  --sp-space-sm: 10px;
  --sp-space-md: 16px;
  --sp-space-lg: 24px;
  --sp-space-xl: 36px;
  --sp-space-2xl: 56px;

  --sp-page-padding: 32px;
  --sp-section-gap: 28px;
  --sp-card-padding: 20px;
  --sp-form-gap: 14px;
  --sp-nav-gap: 10px;
  --sp-grid-gap: 14px;

  /* Radius */
  --sp-radius-sm: 10px;
  --sp-radius-md: 16px;
  --sp-radius-lg: 22px;
  --sp-radius-pill: 100px;

  /* Shadows — subtle only */
  --sp-shadow-sm: 0 4px 14px -6px rgba(19,19,19,0.12);
  --sp-shadow-md: 0 12px 28px -10px rgba(19,19,19,0.18);
  --sp-shadow-lg: 0 20px 45px -18px rgba(19,19,19,0.25);

  /* Backward-compatible aliases — lets existing shell CSS (which already
     used matching values under different names) adopt this file as its
     single source of truth without every property needing to be
     rewritten in one risky pass. */
  --paper: var(--sp-offwhite);
  --card: var(--sp-surface);
  --ink: var(--sp-black);
  --ink-soft: var(--sp-muted);
  --green: var(--sp-green);
  --green-ink: var(--sp-green-ink);
  --line: var(--sp-border);
  --red-ink: var(--sp-error);
  --red-bg: var(--sp-error-bg);
  --amber-ink: var(--sp-warning);
  --amber-bg: var(--sp-warning-bg);
}

/* ==========================================================================
   Shared button system
   ========================================================================== */
.sp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font: var(--sp-text-button); font-family: var(--sp-font-body);
  padding:11px 22px; border-radius: var(--sp-radius-pill); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.sp-btn:focus-visible{ outline:2px solid var(--sp-green); outline-offset:2px; }
.sp-btn:disabled, .sp-btn[aria-disabled="true"]{ opacity:0.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.sp-btn-primary{ background:var(--sp-green); color:var(--sp-black); }
.sp-btn-primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow: var(--sp-shadow-md); }

.sp-btn-secondary{ background:var(--sp-black); color:var(--sp-white); }
.sp-btn-secondary:hover:not(:disabled){ transform:translateY(-1px); box-shadow: var(--sp-shadow-md); }

.sp-btn-tertiary{ background:transparent; color:var(--sp-black); border-color:var(--sp-border); }
.sp-btn-tertiary:hover:not(:disabled){ border-color:var(--sp-black); }

.sp-btn-destructive{ background:transparent; color:var(--sp-error); border-color:var(--sp-error); }
.sp-btn-destructive:hover:not(:disabled){ background:var(--sp-error-bg); }

.sp-btn-loading{ position:relative; color:transparent !important; pointer-events:none; }
.sp-btn-loading::after{
  content:''; position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; color:var(--sp-black);
  animation: sp-spin .6s linear infinite;
}
@keyframes sp-spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   Shared form controls
   ========================================================================== */
.sp-field{ display:flex; flex-direction:column; gap:6px; margin-bottom: var(--sp-form-gap); }
.sp-field label{ font: var(--sp-text-label); font-family: var(--sp-font-body); color: var(--sp-black); text-transform:none; }
.sp-field .sp-hint{ font: var(--sp-text-small); color: var(--sp-muted); }
.sp-field .sp-error-text{ font-size:0.76rem; font-weight:600; color: var(--sp-error); display:none; }
.sp-field .sp-error-text.show{ display:block; }

.sp-input, .sp-select, .sp-textarea{
  width:100%; font: var(--sp-text-body); font-family: var(--sp-font-body);
  padding:11px 13px; border-radius: var(--sp-radius-sm); border:1.5px solid var(--sp-border);
  background: var(--sp-white); color: var(--sp-black);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-input:focus, .sp-select:focus, .sp-textarea:focus{
  outline:none; border-color: var(--sp-green); box-shadow: 0 0 0 3px rgba(95,216,74,0.18);
}
.sp-input:disabled, .sp-select:disabled{ opacity:0.55; cursor:not-allowed; background: var(--sp-surface); }
.sp-input.sp-input-error, .sp-textarea.sp-input-error{ border-color: var(--sp-error); }
.sp-textarea{ min-height:80px; resize:vertical; }

.sp-toggle{ position:relative; width:42px; height:24px; flex-shrink:0; display:inline-block; }
.sp-toggle input{ opacity:0; width:0; height:0; }
.sp-toggle .sp-slider{ position:absolute; inset:0; background: var(--sp-border); border-radius:100px; cursor:pointer; transition:.2s; }
.sp-toggle .sp-slider::before{ content:''; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.sp-toggle input:checked + .sp-slider{ background: var(--sp-green); }
.sp-toggle input:checked + .sp-slider::before{ transform:translateX(18px); }
.sp-toggle input:focus-visible + .sp-slider{ outline:2px solid var(--sp-green); outline-offset:2px; }

/* ==========================================================================
   Shared card system
   ========================================================================== */
.sp-card{ background: var(--sp-surface); border-radius: var(--sp-radius-md); padding: var(--sp-card-padding); }
.sp-card-bordered{ background: var(--sp-white); border:1.5px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: var(--sp-card-padding); }

/* ==========================================================================
   Shared badge system
   ========================================================================== */
.sp-badge{ display:inline-block; padding:4px 11px; border-radius: var(--sp-radius-pill); font-size:0.72rem; font-weight:700; font-family: var(--sp-font-body); }
.sp-badge-neutral{ background: var(--sp-border); color: var(--sp-muted); }
.sp-badge-success{ background: var(--sp-success-bg); color: var(--sp-success); }
.sp-badge-warning{ background: var(--sp-warning-bg); color: var(--sp-warning); }
.sp-badge-error{ background: var(--sp-error-bg); color: var(--sp-error); }
.sp-badge-info{ background: var(--sp-info-bg); color: var(--sp-info); }

/* ==========================================================================
   Empty states
   ========================================================================== */
.sp-empty{ text-align:center; padding: var(--sp-space-xl) var(--sp-space-lg); color: var(--sp-muted); font: var(--sp-text-body); }
.sp-empty img{ width:56px; margin:0 auto var(--sp-space-md); opacity:0.85; }
.sp-empty .sp-empty-title{ font: var(--sp-text-card-title); color: var(--sp-black); margin-bottom:6px; }

/* ==========================================================================
   Skeleton loading
   ========================================================================== */
.sp-skeleton{ background: linear-gradient(90deg, var(--sp-surface) 25%, var(--sp-border) 37%, var(--sp-surface) 63%); background-size:400% 100%; border-radius: var(--sp-radius-sm); animation: sp-shimmer 1.4s ease infinite; }
@keyframes sp-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

@media (prefers-reduced-motion: reduce){
  .sp-btn, .sp-input, .sp-select, .sp-textarea, .sp-toggle .sp-slider, .sp-toggle .sp-slider::before{ transition:none !important; }
  .sp-btn-loading::after, .sp-skeleton{ animation:none !important; }
}