:root {
  color-scheme: light;

  --msm-bg:         #f5f5f7;                  
  --msm-surface:    #ffffff;                  
  --msm-surface-2:  rgba(120, 120, 128, 0.08);
  
  --msm-glass:        rgba(255, 255, 255, 0.55); 
  --msm-glass-strong: rgba(255, 255, 255, 0.72); 

  --msm-text-primary:   #1d1d1f;
  --msm-text-secondary: #6e6e73;
  --msm-text-tertiary:  #6e6e73; 

  --msm-accent:        #0071e3;
  --msm-accent-hover:  #0077ed;              
  --msm-accent-active: #0066cc;
  --msm-on-accent:     #ffffff;
  --msm-accent-soft:   rgba(0, 113, 227, 0.14); 

  --msm-success: #34c759;
  --msm-danger:  #ff3b30;
  
  --msm-hairline:        rgba(0, 0, 0, 0.08);
  --msm-hairline-strong: rgba(0, 0, 0, 0.16);
  --msm-fill:            rgba(120, 120, 128, 0.08); 

  --msm-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Roboto, sans-serif;

  --msm-text-title-2:     22px;
  --msm-text-body:        17px; 
  --msm-text-subhead:     15px;
  --msm-text-footnote:    13px;
  --msm-text-caption:     12px;

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

  --msm-tracking-large-title: -0.022em;
  --msm-tracking-title:       -0.014em;
  --msm-tracking-body:        -0.01em;

  --msm-leading-tight: 1.15;
  --msm-leading-body:  1.45;

  --msm-radius-xs:   10px;  
  --msm-radius-sm:   12px;  
  --msm-radius-md:   18px;  
  --msm-radius-lg:   26px;  
  --msm-radius-header: 980px; 
  --msm-radius-pill: 980px; 

  --msm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --msm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.10);
  --msm-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.07), 0 24px 48px rgba(0, 0, 0, 0.13);

  --msm-ease-spring: cubic-bezier(0.32, 0.72, 0, 1); 
  --msm-ease-out:    cubic-bezier(0.28, 0, 0.22, 1); 
  --msm-ease-exit:   cubic-bezier(0.3, 0, 0.8, 0.15); 
  --msm-ease-enter:  cubic-bezier(0.05, 0.7, 0.1, 1); 
  --msm-dur-fast:    250ms; 
  --msm-dur-base:    350ms; 
  --msm-dur-slow:    500ms; 
  --msm-dur-shimmer: 1.4s;  
  --msm-dur-pop:     460ms; 
  
  --msm-glass-blur-strong: saturate(180%) blur(24px); 
  --msm-glass-blur-base:   saturate(160%) blur(14px); 
  --msm-glass-hi-top:   rgba(255, 255, 255, 0.45);  
  --msm-glass-hi-dim:   rgba(255, 255, 255, 0.10);  
  --msm-glass-rim:      rgba(255, 255, 255, 0.35);  
  --msm-glass-sheen: linear-gradient(135deg,
      rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.06) 28%, transparent 55%);
  --msm-glass-spec-strong:
    inset 0 1px 0 var(--msm-glass-hi-top),
    inset 0 -1px 0 var(--msm-glass-hi-dim);
  --msm-glass-spec-base: inset 0 1px 0 rgba(255, 255, 255, 0.30);

  --msm-container: 768px; 
  --msm-gap: 20px;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    color-scheme: dark;

    --msm-bg:        #000000;
    --msm-surface:   #1c1c1e;
    --msm-surface-2: #2c2c2e;

    --msm-glass:        rgba(28, 28, 30, 0.55);
    --msm-glass-strong: rgba(28, 28, 30, 0.72);

    --msm-glass-hi-top: rgba(255, 255, 255, 0.56); 
    --msm-glass-rim:    rgba(255, 255, 255, 0.30); 
    --msm-glass-spec-strong:
      inset 0 1px 0 rgba(255, 255, 255, 0.56),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10);
    --msm-glass-spec-base: inset 0 1px 0 rgba(255, 255, 255, 0.34);

    --msm-text-primary:   #f5f5f7;
    --msm-text-secondary: #aeaeb2;
    --msm-text-tertiary:  #8e8e93;

    --msm-accent:        #0a84ff;
    --msm-accent-hover:  #409cff;
    --msm-accent-active: #0066d6;
    --msm-on-accent:     #ffffff;
    --msm-accent-soft:   rgba(10, 132, 255, 0.20);

    --msm-success: #30d158;
    --msm-danger:  #ff453a;

    --msm-hairline:        rgba(255, 255, 255, 0.09);
    --msm-hairline-strong: rgba(255, 255, 255, 0.16);
    --msm-fill:            rgba(120, 120, 128, 0.16);

    --msm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.22);
    --msm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.18), 0 12px 32px rgba(0, 0, 0, 0.24);
    --msm-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.22), 0 24px 48px rgba(0, 0, 0, 0.28);
  }
}

body[data-theme="dark"] {
  color-scheme: dark;

  --msm-bg:        #000000;
  --msm-surface:   #1c1c1e;
  --msm-surface-2: #2c2c2e;

  --msm-glass:        rgba(28, 28, 30, 0.55);
  --msm-glass-strong: rgba(28, 28, 30, 0.72);

  --msm-glass-hi-top: rgba(255, 255, 255, 0.56); 
  --msm-glass-rim:    rgba(255, 255, 255, 0.30); 
  --msm-glass-spec-strong:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10);
  --msm-glass-spec-base: inset 0 1px 0 rgba(255, 255, 255, 0.34);

  --msm-text-primary:   #f5f5f7;
  --msm-text-secondary: #aeaeb2;
  --msm-text-tertiary:  #8e8e93;

  --msm-accent:        #0a84ff;
  --msm-accent-hover:  #409cff;
  --msm-accent-active: #0066d6;
  --msm-on-accent:     #ffffff;
  --msm-accent-soft:   rgba(10, 132, 255, 0.20);

  --msm-success: #30d158;
  --msm-danger:  #ff453a;

  --msm-hairline:        rgba(255, 255, 255, 0.09);
  --msm-hairline-strong: rgba(255, 255, 255, 0.16);
  --msm-fill:            rgba(120, 120, 128, 0.16);

  --msm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.22);
  --msm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.18), 0 12px 32px rgba(0, 0, 0, 0.24);
  --msm-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.22), 0 24px 48px rgba(0, 0, 0, 0.28);
}