/*!
 * Speyer UI System (SUI) — Design Tokens
 * Version: 3.5.0
 * https://github.com/adrianspeyer/speyer-ui
 *
 * A lightweight, accessible token system for modern web applications.
 * Made in Canada with love 🇨🇦
 *
 * License: MIT
 */

/* ==========================================================================
   Light Mode (Default)
   ========================================================================== */

:root {
  /* Brand & Actions */
  --sui-blue-primary: #2563EB;  /* WCAG fix: 3.68→5.17:1 on white */
  --sui-blue-hover:   #1D4ED8;  /* WCAG fix: cascade from primary shift */
  --sui-blue-active:  #1E40AF;
  --sui-blue-strong:  #1D4ED8;
  --sui-blue-soft:    #DBEAFE;
  --sui-blue-focus:   #93C5FD;

  /* Backgrounds */
  --sui-bg-primary:   #F9FBFD;
  --sui-bg-card:      #FFFFFF;
  --sui-bg-elevated:  #F1F5F9;
  --sui-border:       #E5EDF5;

  /* Text */
  --sui-text-primary:   #0F172A;
  --sui-text-secondary: #475569;
  --sui-text-muted:     #5C6C80;
  --sui-text-inverse:   #FFFFFF;

  /* Status */
  --sui-success:        #22C55E;
  --sui-success-strong: #15803D;
  --sui-success-soft:   #F0FDF4;
  --sui-warning:        #F59E0B;
  --sui-warning-strong: #92400E;
  --sui-warning-soft:   #FFFBEB;
  --sui-error:          #EF4444;
  --sui-error-strong:   #B91C1C;
  --sui-error-soft:     #FEF2F2;
  --sui-info:           #06B6D4;
  --sui-info-strong:    #0E7490;
  --sui-info-soft:      #ECFEFF;

  /* Neutral (for badges/tags without status meaning) */
  --sui-neutral:        #64748B;
  --sui-neutral-strong: #334155;
  --sui-neutral-soft:   #F1F5F9;

  /* Pro / Premium accent */
  --sui-pro:        #8B5CF6;
  --sui-pro-strong: #6D28D9;
  --sui-pro-soft:   #F5F3FF;

  /* Typography */
  --sui-font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --sui-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --sui-text-h1:    32px;
  --sui-text-h2:    24px;
  --sui-text-h3:    20px;
  --sui-text-body:  16px;
  --sui-text-small: 14px;
  --sui-text-meta:  12px;

  --sui-weight-regular:  400;
  --sui-weight-semibold: 600;
  --sui-weight-bold:     700;

  --sui-leading-body:    1.5;
  --sui-leading-heading: 1.3;

  /* Spacing (8px grid) */
  --sui-space-1: 4px;
  --sui-space-2: 8px;
  --sui-space-3: 16px;
  --sui-space-4: 24px;
  --sui-space-5: 32px;
  --sui-space-6: 48px;

  /* Border Radius */
  --sui-radius-sm:   8px;
  --sui-radius-md:   12px;
  --sui-radius-lg:   16px;
  --sui-radius-full: 9999px;

  /* Shadows (opt-in elevation) */
  --sui-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sui-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.04);
  --sui-shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05);

  /* Overlay */
  --sui-overlay: rgba(15, 23, 42, 0.5);

  /* Z-Index Scale */
  --sui-z-dropdown: 100;
  --sui-z-sticky:   200;
  --sui-z-modal:    300;
  --sui-z-tooltip:  400;

  /* Motion */
  --sui-duration-fast:   150ms;
  --sui-duration-normal: 250ms;
  --sui-easing:          ease-out;

  /* Layout */
  --sui-max-width:    1280px;
  --sui-touch-target: 44px;

  /* Interactive — button/component backgrounds (overridable for brand theming) */
  --sui-btn-primary-bg:         var(--sui-blue-primary);
  --sui-btn-primary-bg-hover:   var(--sui-blue-hover);
  --sui-btn-secondary-bg:       #334155;  /* 10.35:1 on white text — AAA */
  --sui-btn-secondary-bg-hover: #1E293B;
  --sui-btn-danger-bg:          var(--sui-error-strong);
  --sui-btn-danger-bg-hover:    #991B1B;
  --sui-btn-success-bg:         var(--sui-success-strong);
  --sui-btn-success-bg-hover:   #116932;
}


/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-theme="dark"] {
  --sui-blue-primary: #60A5FA;
  --sui-blue-hover:   #3B82F6;
  --sui-blue-active:  #2563EB;
  --sui-blue-strong:  #93C5FD;
  --sui-blue-soft:    #1E3A8A;
  --sui-blue-focus:   #60A5FA;
  --sui-text-primary:   #F8FAFC;
  --sui-text-secondary: #94A3B8;
  --sui-text-muted:     #8494A9;
  --sui-text-inverse:   #FFFFFF;
  --sui-success:        #4ADE80;
  --sui-success-strong: #22C55E;
  --sui-success-soft:   #052E16;
  --sui-warning:        #FBBF24;
  --sui-warning-strong: #FBBF24;
  --sui-warning-soft:   #422006;
  --sui-error:          #F87171;
  --sui-error-strong:   #EF4444;
  --sui-error-soft:     #380808;
  --sui-info:           #22D3EE;
  --sui-info-strong:    #22D3EE;
  --sui-info-soft:      #083344;
  --sui-neutral:        #94A3B8;
  --sui-neutral-strong: #CBD5E1;
  --sui-neutral-soft:   #1E293B;
  --sui-pro:        #A78BFA;
  --sui-pro-strong: #C4B5FD;
  --sui-pro-soft:   #2E1065;

  /* Backgrounds */
  --sui-bg-primary:   #0B0F1A;
  --sui-bg-card:      #161E2C;
  --sui-bg-elevated:  #1E293B;
  --sui-border:       #242F3E;
  --sui-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --sui-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15);
  --sui-shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.20);
  --sui-overlay: rgba(0, 0, 0, 0.65);

  /* Interactive — contrast-safe overrides for dark backgrounds */
  --sui-btn-primary-bg:         #2563EB;
  --sui-btn-primary-bg-hover:   #1D4ED8;
  --sui-btn-secondary-bg:       #475569;  /* 7.24:1 on white text — AAA on dark */
  --sui-btn-secondary-bg-hover: #334155;
  --sui-btn-danger-bg:          #B91C1C;
  --sui-btn-danger-bg-hover:    #991B1B;
  --sui-btn-success-bg:         #15803D;
  --sui-btn-success-bg-hover:   #116932;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --sui-blue-primary: #60A5FA;
    --sui-blue-hover:   #3B82F6;
    --sui-blue-active:  #2563EB;
    --sui-blue-strong:  #93C5FD;
    --sui-blue-soft:    #1E3A8A;
    --sui-blue-focus:   #60A5FA;

    --sui-bg-primary:   #0B0F1A;
    --sui-bg-card:      #161E2C;
    --sui-bg-elevated:  #1E293B;
    --sui-border:       #242F3E;

    --sui-text-primary:   #F8FAFC;
    --sui-text-secondary: #94A3B8;
    --sui-text-muted:     #8494A9;
    --sui-text-inverse:   #FFFFFF;

    --sui-success:        #4ADE80;
    --sui-success-strong: #22C55E;
    --sui-success-soft:   #052E16;
    --sui-warning:        #FBBF24;
    --sui-warning-strong: #FBBF24;
    --sui-warning-soft:   #422006;
    --sui-error:          #F87171;
    --sui-error-strong:   #EF4444;
    --sui-error-soft:     #380808;
    --sui-info:           #22D3EE;
    --sui-info-strong:    #22D3EE;
    --sui-info-soft:      #083344;

    --sui-neutral:        #94A3B8;
    --sui-neutral-strong: #CBD5E1;
    --sui-neutral-soft:   #1E293B;

    --sui-pro:        #A78BFA;
    --sui-pro-strong: #C4B5FD;
    --sui-pro-soft:   #2E1065;

    --sui-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --sui-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15);
    --sui-shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.20);

    --sui-overlay: rgba(0, 0, 0, 0.65);

    /* Interactive — contrast-safe overrides for dark backgrounds */
    --sui-btn-primary-bg:         #2563EB;
    --sui-btn-primary-bg-hover:   #1D4ED8;
    --sui-btn-secondary-bg:       #475569;  /* 7.24:1 on white text — AAA on dark */
    --sui-btn-secondary-bg-hover: #334155;
    --sui-btn-danger-bg:          #B91C1C;
    --sui-btn-danger-bg-hover:    #991B1B;
    --sui-btn-success-bg:         #15803D;
    --sui-btn-success-bg-hover:   #116932;
  }
}



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

@media (prefers-reduced-motion: reduce) {
  :root {
    --sui-duration-fast:   0ms;
    --sui-duration-normal: 0ms;
  }
}


/* ==========================================================================
   High Contrast
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --sui-text-muted:     #334155;
    --sui-text-secondary: #1E293B;
    --sui-border:         #94A3B8;
    --sui-blue-soft:      #2563EB;
    --sui-blue-focus:     #1D4ED8;
  }

  [data-theme="dark"] {
    --sui-text-muted:     #CBD5E1;
    --sui-text-secondary: #E2E8F0;
    --sui-border:         #64748B;
    --sui-blue-soft:      #3B82F6;
    --sui-blue-focus:     #60A5FA;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --sui-text-muted:     #CBD5E1;
      --sui-text-secondary: #E2E8F0;
      --sui-border:         #64748B;
      --sui-blue-soft:      #3B82F6;
      --sui-blue-focus:     #60A5FA;
    }
  }
}