/* ============================================================
   Slash Design Tokens
   Shared CSS custom properties for all themes.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --sl-accent:           #3DEB8A;
  --sl-accent-hover:     #2ED47A;
  --sl-accent-soft:      #E6FDF0;

  /* ── Neutral Palette ── */
  --sl-charcoal:         #1B2332;
  --sl-charcoal-deep:    #16213e;
  --sl-slate:            #475569;
  --sl-gray:             #666666;
  --sl-gray-light:       #888888;
  --sl-cool-white:       #F8FAFC;
  --sl-white:            #FFFFFF;
  --sl-border:           #E2E8F0;
  --sl-bg-muted:         #f8f9fa;

  /* ── Semantic Colors ── */
  --sl-danger:           #DC2626;
  --sl-danger-soft:      #FEE2E2;
  --sl-danger-dark:      #991B1B;
  --sl-warning:          #ffc107;
  --sl-warning-text:     #212529;
  --sl-info:             #17a2b8;
  --sl-success:          #28a745;
  --sl-orange:           #fd7e14;

  /* ── Typography ── */
  --sl-font:             'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sl-font-mono:        'Monaco', 'Menlo', 'Consolas', monospace;

  /* Type Scale */
  --sl-text-xs:          0.75rem;   /* 12px */
  --sl-text-sm:          0.8rem;    /* ~13px */
  --sl-text-base:        0.9rem;    /* ~14px */
  --sl-text-md:          0.95rem;   /* ~15px */
  --sl-text-lg:          1.1rem;    /* ~18px */
  --sl-text-xl:          1.25rem;   /* 20px */
  --sl-text-2xl:         1.5rem;    /* 24px */
  --sl-text-3xl:         1.75rem;   /* 28px */

  /* ── Spacing Scale ── */
  --sl-sp-1:             4px;
  --sl-sp-2:             8px;
  --sl-sp-3:             12px;
  --sl-sp-4:             16px;
  --sl-sp-5:             20px;
  --sl-sp-6:             24px;
  --sl-sp-8:             32px;
  --sl-sp-10:            40px;
  --sl-sp-12:            48px;
  --sl-sp-16:            64px;

  /* ── Border Radius ── */
  --sl-radius-sm:        6px;
  --sl-radius-md:        8px;
  --sl-radius-lg:        12px;
  --sl-radius-xl:        16px;
  --sl-radius-full:      9999px;

  /* ── Shadows (3 levels) ── */
  --sl-shadow-sm:        0 2px 8px rgba(0,0,0,0.08);
  --sl-shadow-md:        0 4px 24px rgba(0,0,0,0.06);
  --sl-shadow-lg:        0 8px 32px rgba(0,0,0,0.12);

  /* ── Z-Index Scale ── */
  --sl-z-dropdown:       100;
  --sl-z-sticky:         200;
  --sl-z-modal-backdrop: 500;
  --sl-z-modal:          600;
  --sl-z-toast:          900;
  --sl-z-tooltip:        1000;

  /* ── Transitions ── */
  --sl-transition:       0.2s ease;
  --sl-transition-slow:  0.3s ease;

  /* ── Focus Ring ── */
  --sl-focus-ring:       0 0 0 3px rgba(61,235,138,0.3);

  /* ── Layout ── */
  --sl-max-width:        1200px;
  --sl-max-width-narrow: 1120px;
}

/* ── Dark Theme Overrides (Concierge / Admin) ── */
[data-theme="dark"],
.theme-dark {
  --sl-bg:               var(--sl-charcoal);
  --sl-bg-card:          #2A3444;
  --sl-text:             var(--sl-cool-white);
  --sl-text-secondary:   var(--sl-slate);
  --sl-border:           rgba(255,255,255,0.1);
  --sl-shadow-sm:        0 2px 8px rgba(0,0,0,0.25);
  --sl-shadow-md:        0 4px 24px rgba(0,0,0,0.3);
  --sl-shadow-lg:        0 8px 32px rgba(0,0,0,0.4);
}

/* ── Light Theme Defaults ── */
[data-theme="light"],
.theme-light {
  --sl-bg:               var(--sl-white);
  --sl-bg-card:          var(--sl-white);
  --sl-text:             var(--sl-charcoal);
  --sl-text-secondary:   var(--sl-slate);
}