/* ==========================================================================
   tokens.css — SLEQ design tokens
   Canonical source: DESIGN.md §2–§6 (Color, Typography, Spacing, Radius,
   Elevation). All token names below map 1:1 to entries in that spec.
   ========================================================================== */

:root {
  /* ========================================================================
     §3 Typography
     ======================================================================== */

  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — individual axes per token */
  --text-display-size:   32px;  --text-display-line:   40px;  --text-display-weight:   600;
  --text-h1-size:        24px;  --text-h1-line:        32px;  --text-h1-weight:        600;
  --text-h2-size:        20px;  --text-h2-line:        28px;  --text-h2-weight:        600;
  --text-h3-size:        16px;  --text-h3-line:        24px;  --text-h3-weight:        600;
  --text-h4-size:        14px;  --text-h4-line:        20px;  --text-h4-weight:        600;
  --text-body-size:      14px;  --text-body-line:      20px;  --text-body-weight:      400;
  --text-body-strong-size: 14px; --text-body-strong-line: 20px; --text-body-strong-weight: 500;
  --text-small-size:     13px;  --text-small-line:     18px;  --text-small-weight:     400;
  --text-caption-size:   12px;  --text-caption-line:   16px;  --text-caption-weight:   500;
  --text-overline-size:  12px;  --text-overline-line:  16px;  --text-overline-weight:  600;

  /* Convenience shorthand fonts (weight size/line family) */
  --font-display:     var(--text-display-weight)     var(--text-display-size)/var(--text-display-line)         var(--font-family-base);
  --font-h1:          var(--text-h1-weight)          var(--text-h1-size)/var(--text-h1-line)                   var(--font-family-base);
  --font-h2:          var(--text-h2-weight)          var(--text-h2-size)/var(--text-h2-line)                   var(--font-family-base);
  --font-h3:          var(--text-h3-weight)          var(--text-h3-size)/var(--text-h3-line)                   var(--font-family-base);
  --font-h4:          var(--text-h4-weight)          var(--text-h4-size)/var(--text-h4-line)                   var(--font-family-base);
  --font-body:        var(--text-body-weight)        var(--text-body-size)/var(--text-body-line)               var(--font-family-base);
  --font-body-strong: var(--text-body-strong-weight) var(--text-body-strong-size)/var(--text-body-strong-line) var(--font-family-base);
  --font-small:       var(--text-small-weight)       var(--text-small-size)/var(--text-small-line)             var(--font-family-base);
  --font-caption:     var(--text-caption-weight)     var(--text-caption-size)/var(--text-caption-line)         var(--font-family-base);
  --font-overline:    var(--text-overline-weight)    var(--text-overline-size)/var(--text-overline-line)       var(--font-family-base);

  /* ========================================================================
     §2 Color Tokens
     ======================================================================== */

  /* Surface scale (warm neutral base) */
  --color-surface-canvas:  #FAFAF9;
  --color-surface-base:    #FFFFFF;
  --color-surface-subtle:  #F4F4F5;
  --color-surface-muted:   #E7E5E4;

  /* Border scale */
  --color-border-default:  #E5E7EB;
  --color-border-strong:   #D4D4D8;
  --color-border-focus:    #1166BB;

  /* Text scale */
  --color-text-primary:    #18181B;
  --color-text-secondary:  #52525B;
  --color-text-muted:      #71717A;
  --color-text-disabled:   #A1A1AA;
  --color-text-inverse:    #FAFAF9;

  /* Primary accent (SLEQ blue) */
  --color-primary-50:      #E1EAF7;
  --color-primary-500:     #2D7FC9;
  --color-primary-600:     #1166BB;
  --color-primary-700:     #223377;

  /* Status — soft-fill (bg + fg pattern) */
  --color-success-bg:      #DCFCE7;  --color-success-fg:   #15803D;
  --color-info-bg:         #CCFBF1;  --color-info-fg:      #0F766E;
  --color-warning-bg:      #FEF3C7;  --color-warning-fg:   #B45309;
  --color-error-bg:        #FEE2E2;  --color-error-fg:     #B91C1C;
  --color-neutral-bg:      #F4F4F5;  --color-neutral-fg:   #52525B;
  --color-accent-bg:       #E1EAF7;  --color-accent-fg:    #223377;

  /* Destructive button color (§7 Buttons) */
  --color-destructive:     #DC2626;
  --color-destructive-hover: #B91C1C;

  /* Avatar tints (stroke-based identity colors for UW/contact chips) */
  --color-av-indigo:       #E0E7FF;  --color-av-indigo-fg:  #3730A3;
  --color-av-teal:         #CCFBF1;  --color-av-teal-fg:    #0F766E;
  --color-av-emerald:      #D1FAE5;  --color-av-emerald-fg: #047857;
  --color-av-amber:        #FEF3C7;  --color-av-amber-fg:   #B45309;
  --color-av-rose:         #FFE4E6;  --color-av-rose-fg:    #BE123C;

  /* ========================================================================
     §4 Spacing (4px base scale)
     ======================================================================== */

  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ========================================================================
     §5 Radius
     ======================================================================== */

  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  /* ========================================================================
     §6 Elevation (shadows — floating elements only; static uses borders)
     ======================================================================== */

  --shadow-sm:    0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md:    0 4px 6px rgba(16, 24, 40, 0.05), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg:    0 20px 25px rgba(16, 24, 40, 0.08), 0 8px 10px rgba(16, 24, 40, 0.04);
  --shadow-focus: 0 0 0 3px rgba(17, 102, 187, 0.18);

  /* ========================================================================
     Motion
     ======================================================================== */

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================================================
     Legacy --sl-* aliases (QuoteLog.jsx uses these; kept until that file
     migrates). Every entry resolves to a canonical token above.
     ======================================================================== */

  --sl-font-sans:         var(--font-family-base);
  --sl-font-mono:         var(--font-family-mono);

  --sl-type-h4:           var(--font-h4);
  --sl-type-body:         var(--font-body);
  --sl-type-body-strong:  var(--font-body-strong);
  --sl-type-small:        var(--font-small);
  --sl-type-caption:      var(--font-caption);
  --sl-type-overline:     var(--font-overline);

  --sl-radius-sm:         var(--radius-sm);
  --sl-radius-md:         var(--radius-md);
  --sl-radius-pill:       var(--radius-pill);

  --sl-dur:               var(--duration-base);
  --sl-dur-fast:          var(--duration-fast);
  --sl-ease:              var(--ease-standard);

  --sl-primary-50:        var(--color-primary-50);
  --sl-primary-500:       var(--color-primary-500);
  --sl-primary-600:       var(--color-primary-600);
  --sl-primary-700:       var(--color-primary-700);

  --sl-surface-base:      var(--color-surface-base);
  --sl-surface-canvas:    var(--color-surface-canvas);
  --sl-surface-subtle:    var(--color-surface-subtle);

  --sl-text-primary:      var(--color-text-primary);
  --sl-text-secondary:    var(--color-text-secondary);
  --sl-text-muted:        var(--color-text-muted);

  --sl-border-default:    var(--color-border-default);

  --sl-success-bg:        var(--color-success-bg);  --sl-success-fg: var(--color-success-fg);
  --sl-info-bg:           var(--color-info-bg);     --sl-info-fg:    var(--color-info-fg);
  --sl-warning-bg:        var(--color-warning-bg);  --sl-warning-fg: var(--color-warning-fg);
  --sl-error-bg:          var(--color-error-bg);    --sl-error-fg:   var(--color-error-fg);
  --sl-neutral-bg:        var(--color-neutral-bg);  --sl-neutral-fg: var(--color-neutral-fg);
  --sl-accent-bg:         var(--color-accent-bg);   --sl-accent-fg:  var(--color-accent-fg);

  --sl-av-indigo:         var(--color-av-indigo);   --sl-av-indigo-fg:  var(--color-av-indigo-fg);
  --sl-av-teal:           var(--color-av-teal);     --sl-av-teal-fg:    var(--color-av-teal-fg);
  --sl-av-emerald:        var(--color-av-emerald);  --sl-av-emerald-fg: var(--color-av-emerald-fg);
  --sl-av-amber:          var(--color-av-amber);    --sl-av-amber-fg:   var(--color-av-amber-fg);
  --sl-av-rose:           var(--color-av-rose);     --sl-av-rose-fg:    var(--color-av-rose-fg);
}

/* ==========================================================================
   Base element styles
   ========================================================================== */

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background: var(--color-surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

h1 {
  font: var(--font-h1);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}

h2 { font: var(--font-h2); color: var(--color-text-primary); margin: 0; }
h3 { font: var(--font-h3); color: var(--color-text-primary); margin: 0; }
h4 { font: var(--font-h4); color: var(--color-text-primary); margin: 0; }

kbd {
  font-family: var(--font-family-base);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-base);
  color: var(--color-text-muted);
  line-height: 1;
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* Tabular numerics helper (QuoteLog references .sl-tnum) */
.sl-tnum { font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.28); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Snackbar animation used by MuiSnackbar */
@keyframes snackbarIn {
  from { transform: translate(-50%, var(--space-6)); opacity: 0; }
  to   { transform: translate(-50%, 0);              opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hide card/section block titles on smaller screens to reduce scroll */
@media (max-width: 1024px) {
  .sl-card-title { display: none !important; }
}