:root {
  
  --ss-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ss-font-mono: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;

  
  --ss-surface:         #fcfbf8;   
  --ss-surface-raised:  #f5f3ef;   
  --ss-surface-sunken:  #f0ede8;   
  --ss-surface-overlay: rgba(252, 251, 248, 0.82);
  --ss-surface-data:    #ffffff;   

  
  --ss-text-primary:     #1a1a1a;  
  --ss-text-primary-hover: #303030;
  --ss-text-secondary:   #555;     
  --ss-text-tertiary:    #6b6b6b;     
  --ss-text-metadata:    #6f6f6f;     
  --ss-text-disabled:    #999;
  --ss-text-placeholder: #747474;

  
  --ss-ink:       var(--ss-text-primary);
  --ss-ink-hover: var(--ss-text-primary-hover);

  
  --ss-border:          #d0ccc7;   
  --ss-border-soft:     #dfdbd6;   
  --ss-border-hover:    #bfbab4;
  --ss-border-hairline: rgba(0, 0, 0, 0.06);

  
  --ss-blue:       #0A66C2;         
  --ss-blue-hover: #08508f;
  --ss-blue-soft:  rgba(10, 102, 194, 0.10);
  --ss-blue-ring:  rgba(10, 102, 194, 0.35);

  --ss-green:      #22c55e;
  --ss-green-ink:  rgb(30, 142, 62);
  --ss-green-soft: rgba(34, 197, 94, 0.12);

  --ss-amber:      #d97706;         
  --ss-amber-ink:  rgb(180, 100, 0);
  --ss-amber-soft: rgba(251, 191, 36, 0.14);

  --ss-red:        #c8362f;         
  --ss-red-ink:    #991b1b;
  --ss-red-soft:   rgba(200, 54, 47, 0.10);

  
  --ss-violet-ink:  #6d28d9;
  --ss-violet-soft: rgba(124, 58, 237, 0.10);
  --ss-teal-ink:    #0f766e;
  --ss-teal-soft:   rgba(20, 184, 166, 0.12);
  --ss-rose-ink:    #be123c;
  --ss-rose-soft:   rgba(225, 29, 72, 0.10);
  
  --ss-amber-ink-strong: #92400e;
  --ss-green-ink-strong: #166534;

  
  
  --ss-radius-xs:   4px;
  --ss-radius-sm:   6px;
  --ss-radius-btn:  8px;            
  --ss-radius-md:   12px;
  --ss-radius-lg:   12px;
  --ss-radius-xl:   12px;           
  --ss-radius-2xl:  20px;
  --ss-radius-3xl:  24px;
  --ss-radius-pill: 9999px;         

  
  --ss-shadow-hairline: 0 1px 3px rgba(0, 0, 0, 0.04);
  --ss-shadow-card:     0 4px 24px rgba(0, 0, 0, 0.08),
                        0 1px 3px rgba(0, 0, 0, 0.04);
  --ss-shadow-float:    0 12px 48px rgba(0, 0, 0, 0.12),
                        0 2px 6px rgba(0, 0, 0, 0.04);

  
  --ss-focus-ring:      0 0 0 2px var(--ss-surface),
                        0 0 0 4px rgba(10, 102, 194, 0.45);
  --ss-focus-ring-ink:  0 0 0 2px var(--ss-surface),
                        0 0 0 4px rgba(26, 26, 26, 0.65);

  
  --ss-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ss-dur-fast:    0.15s;
  --ss-dur-reveal:  0.7s;

  
  --ss-sidebar-width: 208px;
}