/* ============================================================================
   SenangBoss Design System — Theme Tokens  v1.0
   "Making Business Easy"  ·  senangboss.com
   ----------------------------------------------------------------------------
   ORIGINAL, INDEPENDENTLY-AUTHORED THEME.
   Deliberately distinct from the MEYZER360 reference design to avoid any
   brand-identity / trade-dress overlap:
     • Hue family : JADE GREEN  (vs MEYZER cool Wix-blue / indigo navy)
     • Temperature: WARM stone neutrals (vs MEYZER cool blue-slate)
     • Dark base  : WARM charcoal (vs MEYZER cool navy #1F1F30)
     • Accents    : Honey amber + coral (vs MEYZER gold + purple)
     • Type       : Plus Jakarta Sans / Manrope / JetBrains Mono
                    (vs MEYZER Inter / Wix Madefor / Source Sans Pro)
   All fonts are open-source (SIL OFL). No third-party brand assets are used.
   ============================================================================ */

:root {
  /* ---- Brand: "Jade" (primary) ---- */
  --sb-jade-50:  #E9FBF2;
  --sb-jade-100: #C9F4E0;
  --sb-jade-200: #97E9C6;
  --sb-jade-300: #5CD9A6;
  --sb-jade-400: #27C187;
  --sb-jade-500: #0FA968;  /* PRIMARY */
  --sb-jade-600: #0B8A55;
  --sb-jade-700: #0A6E45;
  --sb-jade-800: #0A5739;
  --sb-jade-900: #08402B;

  /* ---- Accent: "Honey" (amber) ---- */
  --sb-honey-300: #FFD98A;
  --sb-honey-400: #FFC24B;
  --sb-honey-500: #F8A91C;  /* ACCENT */
  --sb-honey-600: #D9870A;

  /* ---- Accent 2: "Coral" (energy / highlights) ---- */
  --sb-coral-400: #FF8A7E;
  --sb-coral-500: #FF6B5E;
  --sb-coral-600: #E14C40;

  /* ---- Neutrals: warm "Stone" ---- */
  --sb-stone-0:   #FFFFFF;
  --sb-stone-50:  #FAF8F5;
  --sb-stone-100: #F3EFE9;
  --sb-stone-200: #E7E1D8;
  --sb-stone-300: #D3CABD;
  --sb-stone-400: #ADA294;
  --sb-stone-500: #847A6D;
  --sb-stone-600: #5F574C;
  --sb-stone-700: #443E36;
  --sb-stone-800: #2A2620;
  --sb-stone-900: #1A1713;
  --sb-stone-950: #110F0C;

  /* ---- Semantic ---- */
  --sb-success: #1FB573;
  --sb-warning: #F5A524;
  --sb-error:   #E5484D;
  --sb-info:    #0CA5B0;   /* teal — intentionally NOT blue */

  /* ============ LIGHT THEME (default) ============ */
  --sb-bg:            var(--sb-stone-50);
  --sb-surface:       var(--sb-stone-0);
  --sb-surface-2:     var(--sb-stone-100);
  --sb-border:        var(--sb-stone-200);
  --sb-border-strong: var(--sb-stone-300);

  --sb-text:          var(--sb-stone-900);
  --sb-text-muted:    var(--sb-stone-600);
  --sb-text-subtle:   var(--sb-stone-500);
  --sb-text-on-brand: #FFFFFF;

  --sb-primary:       var(--sb-jade-500);
  --sb-primary-hover: var(--sb-jade-600);
  --sb-primary-soft:  var(--sb-jade-50);
  --sb-accent:        var(--sb-honey-500);
  --sb-focus-ring:    rgba(15,169,104,0.35);

  /* ---- Typography ---- */
  --sb-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --sb-font-body:    "Manrope", system-ui, sans-serif;
  --sb-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --sb-text-xs:  0.75rem;   --sb-lh-xs:  1rem;
  --sb-text-sm:  0.875rem;  --sb-lh-sm:  1.25rem;
  --sb-text-md:  1rem;      --sb-lh-md:  1.5rem;
  --sb-text-lg:  1.125rem;  --sb-lh-lg:  1.6rem;
  --sb-text-xl:  1.375rem;  --sb-lh-xl:  1.8rem;
  --sb-text-2xl: 1.75rem;   --sb-lh-2xl: 2.1rem;
  --sb-text-3xl: 2.25rem;   --sb-lh-3xl: 2.6rem;
  --sb-text-4xl: 3rem;      --sb-lh-4xl: 3.3rem;

  --sb-weight-regular: 400;
  --sb-weight-medium:  500;
  --sb-weight-semibold:600;
  --sb-weight-bold:    700;

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

  /* ---- Radius (soft / rounded language) ---- */
  --sb-radius-sm:  8px;
  --sb-radius-md:  12px;
  --sb-radius-lg:  16px;
  --sb-radius-xl:  24px;
  --sb-radius-pill: 999px;

  /* ---- Elevation (soft, warm-tinted shadows) ---- */
  --sb-shadow-xs: 0 1px 2px rgba(26,23,19,0.06);
  --sb-shadow-sm: 0 2px 6px rgba(26,23,19,0.08);
  --sb-shadow-md: 0 8px 20px rgba(26,23,19,0.10);
  --sb-shadow-lg: 0 16px 40px rgba(26,23,19,0.14);

  /* ---- Motion ---- */
  --sb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sb-dur-fast: 120ms;
  --sb-dur: 200ms;
}

/* ============ DARK THEME (warm charcoal) ============ */
[data-theme="dark"] {
  --sb-bg:            #15120E;
  --sb-surface:       #1E1A15;
  --sb-surface-2:     #272219;
  --sb-border:        #393227;
  --sb-border-strong: #4A4234;

  --sb-text:          #F5F1EA;
  --sb-text-muted:    #BCB2A2;
  --sb-text-subtle:   #8C8273;
  --sb-text-on-brand: #08210F;

  --sb-primary:       var(--sb-jade-400);
  --sb-primary-hover: var(--sb-jade-300);
  --sb-primary-soft:  rgba(15,169,104,0.14);
  --sb-accent:        var(--sb-honey-400);
  --sb-focus-ring:    rgba(39,193,135,0.45);

  --sb-shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --sb-shadow-sm: 0 2px 6px rgba(0,0,0,0.45);
  --sb-shadow-md: 0 8px 20px rgba(0,0,0,0.5);
  --sb-shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
}

/* ============================================================================
   Base component classes (optional starter kit)
   ============================================================================ */
.sb-body { font-family: var(--sb-font-body); color: var(--sb-text);
  background: var(--sb-bg); font-size: var(--sb-text-md); line-height: var(--sb-lh-md); }
h1,h2,h3,.sb-display { font-family: var(--sb-font-display); font-weight: var(--sb-weight-bold);
  letter-spacing: -0.01em; color: var(--sb-text); }

.sb-btn { font-family: var(--sb-font-body); font-weight: var(--sb-weight-semibold);
  font-size: var(--sb-text-sm); border-radius: var(--sb-radius-pill);
  padding: 10px 20px; border: 1px solid transparent; cursor: pointer;
  transition: background var(--sb-dur) var(--sb-ease), transform var(--sb-dur-fast); }
.sb-btn:active { transform: translateY(1px); }
.sb-btn--primary { background: var(--sb-primary); color: var(--sb-text-on-brand); }
.sb-btn--primary:hover { background: var(--sb-primary-hover); }
.sb-btn--secondary { background: var(--sb-surface); color: var(--sb-text);
  border-color: var(--sb-border-strong); }
.sb-btn--ghost { background: transparent; color: var(--sb-primary); }
.sb-btn--accent { background: var(--sb-accent); color: #2A1A00; }

.sb-input { font-family: var(--sb-font-body); font-size: var(--sb-text-sm);
  background: var(--sb-surface); color: var(--sb-text);
  border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-md);
  padding: 10px 14px; outline: none; transition: border var(--sb-dur), box-shadow var(--sb-dur); }
.sb-input:focus { border-color: var(--sb-primary); box-shadow: 0 0 0 4px var(--sb-focus-ring); }

.sb-card { background: var(--sb-surface); border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-sm); padding: var(--sb-space-6); }

.sb-badge { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sb-font-body); font-weight: var(--sb-weight-semibold);
  font-size: var(--sb-text-xs); padding: 4px 10px; border-radius: var(--sb-radius-pill); }
.sb-badge--success { background: var(--sb-jade-50); color: var(--sb-jade-700); }
.sb-badge--warning { background: #FEF3DD; color: var(--sb-honey-600); }
.sb-badge--error   { background: #FDECEC; color: var(--sb-error); }
.sb-badge--info    { background: #E2F6F7; color: #0B7E87; }