/**
 * SML Design Tokens — colours matched to actual Scanmelabs logo
 * Primary blue #1565C0 | Accent green #388E3C
 */
:root {
  --sl-navy-darkest:  #042C53;
  --sl-navy-dark:     #0C447C;
  --sl-navy:          #1565C0;
  --sl-navy-mid:      #2196F3;
  --sl-navy-light:    #90CAF9;
  --sl-navy-pale:     #BBDEFB;
  --sl-navy-ghost:    #E3F2FD;

  --sl-teal-darkest:  #1B5E20;
  --sl-teal-dark:     #2E7D32;
  --sl-teal:          #388E3C;
  --sl-teal-mid:      #66BB6A;
  --sl-teal-light:    #A5D6A7;
  --sl-teal-ghost:    #E8F5E9;

  --sl-gray-darkest:  #212121;
  --sl-gray-dark:     #424242;
  --sl-gray:          #616161;
  --sl-gray-mid:      #9E9E9E;
  --sl-gray-light:    #BDBDBD;
  --sl-gray-pale:     #E0E0E0;
  --sl-gray-ghost:    #F5F5F5;

  --sl-color-primary:       var(--sl-navy);
  --sl-color-primary-dark:  var(--sl-navy-dark);
  --sl-color-accent:        var(--sl-teal);
  --sl-color-accent-light:  var(--sl-teal-ghost);
  --sl-color-text:          #1A1A1A;
  --sl-color-text-muted:    var(--sl-gray);
  --sl-color-text-inverse:  #ffffff;
  --sl-color-bg:            #ffffff;
  --sl-color-bg-alt:        var(--sl-gray-ghost);
  --sl-color-bg-dark:       var(--sl-navy-darkest);
  --sl-color-border:        rgba(0,0,0,0.12);
  --sl-color-border-light:  rgba(0,0,0,0.07);

  --sl-color-success:       #388E3C;
  --sl-color-success-light: #E8F5E9;
  --sl-color-warning:       #F57C00;
  --sl-color-warning-light: #FFF3E0;
  --sl-color-error:         #C62828;
  --sl-color-error-light:   #FFEBEE;
  --sl-color-info:          #1565C0;
  --sl-color-info-light:    #E3F2FD;

  --sl-font-sans: 'Inter','Noto Sans',system-ui,-apple-system,sans-serif;
  --sl-font-mono: 'JetBrains Mono','Fira Mono',monospace;

  --sl-text-xs:   0.6875rem;
  --sl-text-sm:   0.75rem;
  --sl-text-base: 0.8125rem;
  --sl-text-md:   0.875rem;
  --sl-text-lg:   1rem;
  --sl-text-xl:   1.125rem;
  --sl-text-2xl:  1.375rem;
  --sl-text-3xl:  1.625rem;
  --sl-text-4xl:  2rem;

  --sl-leading-tight:  1.3;
  --sl-leading-normal: 1.6;
  --sl-leading-loose:  1.75;
  --sl-weight-regular: 400;
  --sl-weight-medium:  500;
  --sl-weight-bold:    600;

  --sl-space-1:  0.25rem;
  --sl-space-2:  0.5rem;
  --sl-space-3:  0.75rem;
  --sl-space-4:  1rem;
  --sl-space-5:  1.25rem;
  --sl-space-6:  1.5rem;
  --sl-space-8:  2rem;
  --sl-space-10: 2.5rem;
  --sl-space-12: 3rem;
  --sl-space-16: 4rem;

  --sl-container-max:  1280px;
  --sl-sidebar-width:  240px;
  --sl-navbar-height:  64px;

  --sl-radius-sm:    4px;
  --sl-radius-md:    6px;
  --sl-radius-lg:    8px;
  --sl-radius-xl:    12px;
  --sl-radius-full:  9999px;
  --sl-border:       0.5px solid var(--sl-color-border);
  --sl-border-light: 0.5px solid var(--sl-color-border-light);

  --sl-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --sl-shadow-md: 0 2px 8px rgba(0,0,0,0.10);
  --sl-shadow-lg: 0 4px 20px rgba(0,0,0,0.12);

  --sl-transition:      0.15s ease;
  --sl-transition-slow: 0.3s ease;

  --sl-z-navbar:   100;
  --sl-z-dropdown: 200;
  --sl-z-overlay:  300;
  --sl-z-toast:    400;
}

@media (max-width: 767px) {
  :root {
    --sl-space-8:  1.5rem;
    --sl-space-10: 2rem;
    --sl-space-12: 2.5rem;
    --sl-space-16: 3rem;
    --sl-navbar-height: 56px;
  }
}